[JavaScript知识库]cookie的api和封装

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;
  }
};