前后端完全分离的是目前web开发的大趋势，包括现下流行的前端框架的应用vue,angular，在不同页面跳转时，前端需要对用户登录状态进行判断，拿到用户的id，除了Ajax从服务器端获取数据外，对cookie的操作亦必不可少。
设置cookie
每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：
document.cookie="userId=666";
如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：
document.cookie="userId=666; userName=steve";
在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。
保存的值是不确定的解决方案：用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值中，而且使用此种方案还可以避免中文乱码的出现。
例如：
document.cookie="str="+escape("I love javascript");
相当于： document.cookie="str=I%20love%20javascript";
当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。
首先设置两个看看：
document.cookie = "userId=666";
document.cookie = "userName=steve";
var myCookie = document.cookie；
console.log(myCookie)
封装的cookie操作：
//toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。
//不赞成使用此方法：请使用 toUTCString() 取而代之。
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else {
return null;
}
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
//设定自定义过期时间 ，程序代码
function setCookie(name, value, time) {
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec * 1);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getsec(str) {
var str1 = str.substring(1, str.length) * 1;
var str2 = str.substring(0, 1);
if (str2 == "s") {
return str1 * 1000;
} else if (str2 == "h") {
return str1 * 60 * 60 * 1000;
} else if (str2 == "d") {
return str1 * 24 * 60 * 60 * 1000;
}
}
//有设定过期时间的使用：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
//以下是测试代码：
setCookie("name", "mark", "s5");
console.log(myCookie);
setTimeout(function(){
delCookie("userName");
console.log(myCookie);
}, 7000 )；
//==============================整理一下，项目应用
(function() {
var myCookie = {};
myCookie.getCookie = function(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
};
function getsec(str) {
var str1 = str.substring(1, str.length) * 1;
var str2 = str.substring(0, 1);
if (str2 == "s") {
return str1 * 1000;
} else if (str2 == "h") {
return str1 * 60 * 60 * 1000;
} else if (str2 == "d") {
return str1 * 24 * 60 * 60 * 1000;
}
};
myCookie.setCookie = function(name, value, time) {
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec * 1);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
};
myCookie.delCookie = function(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = myCookie.getCookie(name);
if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};
window.myCookie = myCookie;
})(window.myCookie || {});
//初始cookie数据
document.cookie = "userId=666";
document.cookie = "userName=stevejobs";
myCookie.setCookie("name", "helloword", "s5");
console.log(document.cookie);
setTimeout(function() {
myCookie.delCookie("userName");
console.log(document.cookie);
}, 7000);