原文出自：https://www.pandashen.com
cookie 概述
由于浏览器无状态的特性，cookie 技术应运而生，cookie 是一个会话级的存储，用于某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密），通过访问某些服务器而特定携带的存储信息，不支持跨域，在浏览器清空缓存或超过有效期后失效。
JavaScript 中的 cookie
在 JavaScript 中操作 cookie 通过 document.cookie 来实现：
// 操作 cookie
document.cookie = "key1=value1; key2=value2; path=/; domain=pandashen.com";
在传递 cookie 过程中，使用上面这样的方式对于参数的传递和拼接都是不太方便的，下面我们来封装一个自己的 cookie 功能。
封装一个 cookie 模块
1、整体思路设计
(function() {
var kvTool = {
maxage: "max-age",
path: "path",
domain: "domain",
secure: "secure"
};
function setCookie() {}
function getCookie() {}
var cookieUtil = function() {};
window.cookieUtil = cookieUtil;
})();
我们封装了一个自执行函数，在内部将 cookie 基本参数的键名存入 kvTool 对象当中设计的 options 参数的键名一一对应，并单独声明一个设置 cookie 的方法 setCookie 和获取 cookie 的方法 getCookie，最后用函数表达式的形式声明一个 cookieUtil 暴露给全局作用域。
2、setCookie 方法的实现
(function() {
var kvTool = {
maxage: "max-age",
path: "path",
domain: "domain",
secure: "secure"
};
function setCookie(k, v, options) {
if (!options) {
document.cookie = k + "=" + v;
} else {
var tmp = [];
for (var key in options) {
// { path='/', domain='pandashen.com' }
tmp.push(kvTool[key] + "=" + options[key]);
}
document.cookie = k + "=" + v + "; " + tmp.join("; ");
}
}
function getCookie() {}
var cookieUtil = function() {};
window.cookieUtil = cookieUtil;
})();
setCookie 方法的有三个参数：
- k：cookie 发送信息的键
- v：cookie 发送信息的值
- options：cookie 的基本参数
当没有传入基本参数 options 的时候直接将 cookie 发送信息的键值拼接赋值给 document.cookie。
传入基本参数 options 的时候取出 kvTool 真正的键名，并和 cookie 发送的信息的键值拼接成 k=v; k=v 形式的字符串赋值给 document.cookie。
3、getCookie 方法的实现
(function() {
var kvTool = {
maxage: "max-age",
path: "path",
domain: "domain",
secure: "secure"
};
function setCookie(k, v, options) {
if (!options) {
document.cookie = k + "=" + v;
} else {
var tmp = [];
for (var key in options) {
// { path='/', domain='pandashen.com' }
tmp.push(kvTool[key] + "=" + options[key]);
}
document.cookie = k + "=" + v + "; " + tmp.join("; ");
}
}
function getCookie(k) {
var strCookie = document.cookie;
// 形如: 'k=v; k=v; k=v; k=v'
var kvs = strCookie.split(";").map(v => v.trim());
var objCookie = {};
kvs.forEach(v => {
var kv = v.split("=");
objCookie[kv[0]] = kv[1];
});
return objCookie[k];
}
var cookieUtil = function() {};
window.cookieUtil = cookieUtil;
})();
getCookie 方法只有一个参数，即我们要获取的 cookie 的某一个属性的键，函数会将对应的值返回。
其实对外暴露的方法只有 cookieUtil，所以 setCookie 和 getCookie 都是在 cookieUtil 内部调用的。
4、cookieUtil 方法的实现
(function() {
var kvTool = {
maxage: "max-age",
path: "path",
domain: "domain",
secure: "secure"
};
function setCookie(k, v, options) {
if (!options) {
document.cookie = k + "=" + v;
} else {
var tmp = [];
for (var key in options) {
// { path='/', domain='pandashen.com' }
tmp.push(kvTool[key] + "=" + options[key]);
}
document.cookie = k + "=" + v + "; " + tmp.join("; ");
}
}
function getCookie(k) {
var strCookie = document.cookie;
// 形如: 'k=v; k=v; k=v; k=v'
var kvs = strCookie.split(";").map(v => v.trim());
var objCookie = {};
kvs.forEach(v => {
var kv = v.split("=");
objCookie[kv[0]] = kv[1];
});
return objCookie[k];
}
var cookieUtil = function(key, value, options) {
if (!value) {
// 没有传参, 得到数据
return getCookie(key);
} else {
setCookie(key, value, options);
}
};
window.cookieUtil = cookieUtil;
})();
cookieUtil 的逻辑为当 key 和 value 两个参数都传入时，调用 setCookie 来设置 cookie，只传入 key 时，调用 getCookie 获取 cookie 对应参数的值。
上面就是我们封装的 cookie 功能模块来帮主我们设置和获取 cookie，之所以封装这个功能最终的目的就是让我们更方便的通过 JavaScript 来操作 cookie。
