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;
}
};
- 点赞
- 收藏
- 关注作者
评论(0)