关于javascript:cookie的api和封装

51次阅读

共计 2439 个字符，预计需要花费 7 分钟才能阅读完成。

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

正文完