cookie的api和封装

举报
伯约同学 发表于 2022/02/17 22:06:26 2022/02/17
【摘要】 上一篇文章对比了下cookie,localstorage,sessionstroage三者的区别,其中讲到了cookie需要我们专门封装一下,而剩下两个有专门的get、set方法。今天主要。看看cookie在实际项目中的封装。首先看下cookie都有哪些属性方法。其实就两个,一个读取,一个写入。一、读取allCookies = document.cookie我们通过document.cook...

上一篇文章对比了下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;
  }
};
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。