在开发web项目的时候，cookie的使用可提高用户体验，之前对于cookie的认识，都是处于一种似懂非懂得境地，也不知道该怎么用代码去处理它，而且在面试的时候偶尔也会问到，于是今天就好好研究一番。
1. cookie的信息是人为设置的
起初，我一直以为cookie是因为用户登录某个网站之后，服务器返回的一个特定的标识给浏览器，然后浏览器将这个标识保存，每当用户再发起请求的时候，都会把这个标识带上，最后后台识别是同一个用户发起之后（验证之后）就把用户想要的文件返回给浏览器。
其实这么理解也没啥特别错误的地方，因为session机制好像就是这么做的。但是，不是说好要讲cookie的吗？怎么又扯上session了呢？
为了呼应小标题，这里要突出两个词：人为设置和提升体验。
我们都知道，像银行这种安全级别很高的企业，都会要求用户在登录的时候重新输入账号和密码，它基本不会主动去保存用户账户和密码等隐私信息，所以让我们觉得用户体验不高，因为这是为了大家的资金安全。
但是普通的门户网站就没这个必要了，因为上面基本上没有我们的隐私信息，所以又要为了提高大众的用户体验，它会把个人的账户和密码通过document.cookie的方式保存下来，是为了在用户第二次登录的时候，通过读取上次保存下来的cookie直接帮用户把账户和密码等信息填好了，用户直接点击登录就可以了。
那么到底是怎么保存的呢？
2.cookie信息的保存
上面说的都是屁话，见代码：
set: function(name, value, days, path) { /**添加设置cookie**/
var name = escape(name);
var value = escape(value);
var expires = new Date();
expires.setTime(expires.getTime() + days * 1000 * 60 * 60 * 24);
//path=/，表示cookie能在整个网站下使用，path=/temp，表示cookie只能在temp目录下使用
path = (path == "") ? "" : ";path=" + path;
//GMT(Greenwich Mean Time)是格林尼治平时，现在的标准时间是UTC
//参数days只能是数字型
var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();
document.cookie = name + "=" + value + _expires + path;
},3.cookie信息的获取
get: function(name) {
//用escape()方法对字符串进行编码，因为国内用的是中文，你懂得
var name = escape(name);
//document.cookie该方法可获取cookie，这将返回文档的所有cookie
var allcookies = document.cookie;
/*
查找名为name的cookie的开始位置，因为cookie的值是这种类型的：name=kevin; [email protected]; lastvisited=index.html
*/
name += "=";
var pos = allcookies.indexOf(name);
//如果找到了具有该名字的cookie，那么提取并使用它的值
if (pos != -1) { //如果pos值为-1则说明搜索失败
var start = pos + name.length; //cookie值开始的位置
var end = allcookies.indexOf(";", start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置
if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie
var value = allcookies.substring(start, end); //提取cookie的值
return (value); //对它解码
} else { //搜索失败，返回空字符串
return "";
}
},我们可随便找一个网站去打印cookie值，如下图：
4.关于cookie操作的剩余补充
/**根据cookie的键，删除cookie，其实就是设置其失效**/
delete: function(name, path) {
var name = escape(name);
var expires = new Date(0);
path = (path == "") ? "" : ";path=" + path;
document.cookie = name + "=" + ";expires=" + expires.toUTCString() + path;
},
/**实现功能，保存用户的登录信息到cookie中**/
setInfo: function() {
var userNameValue = this.get("userName");
var userPassValue = this.get("userPass");
return {
name: userNameValue,
mypwd: userPassValue
};
},
/**当登录页面被打开时，就查询cookie，查到之后可直接填充信息**/
getInfo: function(name, passpwd) {
this.user = name;
this.pwd = passpwd;
},
/**用户登录，其中需要判断是否选择记住密码**/
userLogin: function() {
//验证
var userName = this.user;
if (userName == '') {
alert("请输入用户名。");
return;
}
var userPass = this.pwd;
if (userPass == '') {
alert("请输入密码。");
return;
}
var objChk = document.getElementById("chkRememberPass");
if (objChk.checked) {
//添加cookie
this.addCookie("userName", userName, 7, "/");
this.addCookie("userPass", userPass, 7, "/");
} else {}
}5.完整的相关cookie操作
var Cookie = {
user: '',
pwd: '',
/**添加设置cookie**/
set: function(name, value, days, path) {
var name = escape(name);
var value = escape(value);
var expires = new Date();
expires.setTime(expires.getTime() + days * 1000 * 60 * 60 * 24);
path = (path == "") ? "" : ";path=" + path;
var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();
document.cookie = name + "=" + value + _expires + path;
},
/**获取cookie的值，根据cookie的键获取值**/
get: function(name) {
var name = escape(name);
var allcookies = document.cookie;
name += "=";
var pos = allcookies.indexOf(name);
if (pos != -1) {
var start = pos + name.length;
var end = allcookies.indexOf(";", start);
if (end == -1) end = allcookies.length;
var value = allcookies.substring(start, end);
return (value);
} else {
return "";
}
},
/**根据cookie的键，删除cookie，其实就是设置其失效**/
delete: function(name, path) {
var name = escape(name);
var expires = new Date(0);
path = (path == "") ? "" : ";path=" + path;
document.cookie = name + "=" + ";expires=" + expires.toUTCString() + path;
},
/**实现功能，保存用户的登录信息到cookie中**/
setInfo: function() {
var userNameValue = this.getCookieValue("userName");
var userPassValue = this.getCookieValue("userPass");
return {
name: userNameValue,
mypwd: userPassValue
};
},
getInfo: function(name, passpwd) {
this.user = name;
this.pwd = passpwd;
},
/**用户登录，其中需要判断是否选择记住密码**/
userLogin: function() {
var userName = this.user;
if (userName == '') {
alert("请输入用户名。");
return;
}
var userPass = this.pwd;
if (userPass == '') {
alert("请输入密码。");
return;
}
var objChk = document.getElementById("chkRememberPass");
if (objChk.checked) {
//添加cookie
this.addCookie("userName", userName, 7, "/");
this.addCookie("userPass", userPass, 7, "/");
} else {}
}
}
export {
Cookie
}6.关于Cookie.js（关于cookie操作的使用）文件的使用
import { Cookie } from "../js/Cookie.js";
//用的JQuery，所以必须先引入JQuery库
login: function() {
var username = $(".user_login").val();
var password = $(".user_pwd").val();
$.post(
url,
{
username: username,
password: password
},
function(res) {
Cookie.set("userid", res.data.userid, 7, "/");
Cookie.set("uname", res.data.uname, 7, "/");
window.location.href = "#/index";
}
);
}