cookie的api和封装
上一篇文章对比了下cookie，localstorage，sessionstroage三者的区别，其中讲到了cookie需要我们专门封装一下，而剩下两个有专门的get、set方法。今天主要。看看cookie在实际项目中的封装。
首先看下cookie都有哪些属性方法。
其实就两个，一个读取，一个写入。
一、读取
allCookies = document.cookie我们通过document.cookie就可以获取当前域名及其子域名下的所有cookie，它是以"; "（分号+空格）作为分隔符的键值对形式字符串。
比如你在mdn网站下打开控制台输入
document.cookie就会出现
'_ga=GA1.2.1682758841.1619014911; preferredlocale=en-US; lux_uid=164510371039082338; _gid=GA1.2.750491686.1645103711'当然，不同电脑不一样哈。
二、写入
document.cookie = newCookie这里值得注意的是，newCookie也是一个字符串，它包含1+5个参数，分别是
1、由键名和键值组成的字符串，必填
“${name}=${value}”值得注意的是value最后如果是分号或者空格的话，会被删除，我也是刚体验了一下才知道
2、path
;path=*path*path用来确定cookie随哪个请求发出去
假设你的浏览器当前已经有了两个Cookie：
cookie1：name=name1; value=value1; path=/boyue/；
cookie2：name=name2; value=value2; path=/boyue/tongxue/。
当访问http://localhost/boyue/*时，请求头中会包含cookie1，而不会包含cookie2。
当访问http://localhost/boyue/tongxue/*时，请求头中会包含上面两个。
即，在访问子路径时，会包含其父路径的Cookie，而在访问父路径时，不包含子路径的Cookie。仔细想想这点其实也挺符合逻辑的，要不然这个参数也就没意义了。
3、domain
;domain=*domain*设置域。可能有同学觉得，我有了path为什么还需要domain这个参数，他主要是为了不同域名下共享或区分一些参数，比如a.boyue.com和b.boyue.com是不同的域名，但是他们都可以拿到boyue.com下的cookie，却不能互相拿到。记得要带个“.”不然就是设置只有域名完全一样了才能获取到这个参数。
4、max-age
;max-age=*max-age-in-seconds*这个好理解，就是设置一个多久后失效
5、;expires=date-in-GMTString-format
设置过期时间和日期，跟上面的差不多
6、;secure
表示cookie是否只能通过https协议传输
如果是true的话，即使js获取到了对应的cookie，http请求也无法携带该参数。
三、封装
封装主要就是修改它的写入、获取方法，尤其是获取方法，毕竟我需要的一般是对应的value而不是所有的键值对。下面简单实现一下
const cookie = {
get: function (sKey) {
// 按照存储的规则(不同键值对用分号和空格区分，小属性用分号区分)，先用“; ”进行切割，再取出里面第一个等号和第一个分号中的内容即可
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
// 写进去就完事了，会直接覆盖原来的键值对
set: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
// 设置对应的过期时间小于当前时间即可
remove: function (sKey, sPath, sDomain) {
if (!sKey || !this.hasItem(sKey)) { return false; }
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
return true;
}
};
