今天我们讲下cookie，不管是以前还是现在都有一只在用cookie的，所以呢，看下cookie的用法，来，先看文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
然后cookie是什么呢，主要就是一个存数据的，一个字符串，只是这个字符串有个时间限制，存多久，到时间之后，就获取不到了，获取cookie的话，直接document.cookie就可以看到当前cookie里面有用的数据，也就是说还没有过期的数据
但是如果浏览器一直开着的话，就算到期了，也会一直显示着，除非浏览器关闭之后，再开之后，开的时候过期了，然后获取到的才是未过期数据
刚刚试了下，关闭浏览器指的是关闭所有的浏览器，不能开着一个，把另一个给关了，这样他还是在浏览器里面的，刚刚开着一个谷歌，把另一个页面拉出另一个窗口关掉都是不管用的，必须把所有的浏览器都要关掉，才能算是关闭会话了，所以大家写的时候要注意了
然后这个cookie设置的方式也有点特殊，设置的时候是设置的字符串，以分号区分，他有一堆属性，但是每个属性设置的时候需要以分号分割
比如设置一个属性，时间设置到1天以后，获取到时间之后加1天，转成字符串，然后直接再按后面加一个expires就可以：
document.cookie = `setname=name;expires=${datastring}`
知道es6的明白这个是什么意思，不知道的查一下es6的字符串新写法
其他属性也是一样的，大家自己看着设置下就好，具体用法就这么简单，就一个带时间的字符串，哈哈
然后mdn给了一个案例，是对于cookie的设置与删除等方法，大家也可以参考下，虽然我感觉不是太好用的，但是大家还是可以将就着用一下，哈哈
```
var docCookies = {
getItem: function (sKey) {
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: 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;
},
removeItem: 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;
},
hasItem: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: /* optional method: you can safely remove it! */ function () {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
return aKeys;
}
};
```
然后之前用vue-element-admin，里面我看到他们里面有一个js-cookie库，具体他里面代码没怎么看，里面有get，set，remove等方法，用的时候和用localStorage差不多，设置的时候可以设置时间的，也可以设置其他属性，看大家怎么用了
我看他里面代码也就那么160多行，所以大家想要看下也可以，自己写的才会最适合的，我永远相信这句话
刚刚测试出一个用法，如果cookie设置的时间是session的时候，也就是临时的cookie的没有设置时间的，那么设置相同的cookie键名，值会被覆盖掉的，时间相同的cookie，值也会被覆盖掉
但是其他的属性如果不一样的话，那么值也不会被覆盖掉，也就是说，其他属性都相同的情况下，值不同，才会被覆盖掉，否则不会
好了，今天就讲到这里了，明天再说吧
网友评论