前后端完全分離的是目前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);