Cookie封装及Cookie删除失败问题处理

81 阅读 0 评论 54 点赞

我是靠谱客的博主无私朋友，这篇文章主要介绍Cookie封装及Cookie删除失败问题处理，现在分享给大家，希望可以做个参考。

之前有看过其他文章对Cookie的封装，发现只要切换页面，Cookie就会删除不成功，后来发现是直接用过期时间覆盖并不能覆盖准确，造成这个的原因是Path不一致的问题。

首先说一下Cookie组成部分：Name（名称）、Value（值）、Domain（域名）、Path（路径）、Expires（过期时间）、Size（大小）、HttpOnly（JavaScript不能读取该Cookie，提高安全性）、Secure（规定cookie只能在https协议下才能够发送到服务器）、SameSite（防止 CSRF 攻击和用户追踪）。

在存入Cookie的时候，如果不设置Domain和Path，则默认为当前网站域名及根目录，如果覆盖的时候，不指定Path就不会覆盖之前设置的Cookie

所以我根据原有的代码进行改进，代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*存入cookie
  *@name 字段名称
  *@value 字段值
  *@day 天数
  */
  setCookie(name, value, day) {
    var strCookie = "";
    if (name && value) {
      strCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + ";";
    }
    if (typeof (day) === "number") {
      var date = new Date();
      date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * day);
      //为了覆盖之前cookie的时候能够准确覆盖
      strCookie += "expires=" + date.toUTCString() + "; path=/;"
    }
    return document.cookie = strCookie;
  },
  /*取出cookie
  *@name 字段名称
  */
  getCookie(name) {
    //var result={};
    var cookieStr = decodeURIComponent(document.cookie);
    var arr1 = cookieStr.split(";"); //[aa='xxx',bb="xxx"]
    for (var i = 0; i < arr1.length; i++) {
      var arr2 = arr1[i].split("=");
      if (arr2[0].trim() === name) {
        return arr2[1]
      }
    }
  },
  /*删除cookie
  *@name 字段名称
  */
  delCookie(name) {
    this.setCookie(name, 1, -1)
  }