今天我们讲下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,值也会被覆盖掉
但是其他的属性如果不一样的话,那么值也不会被覆盖掉,也就是说,其他属性都相同的情况下,值不同,才会被覆盖掉,否则不会
好了,今天就讲到这里了,明天再说吧