我理解的 Cookie 读/写/删除-CSDN博客

不吐槽，上来就搞。希望坚持下去吧，先定一个小目标：一周写一篇。

Cookie 是什么？

按个人理解，Cookie就是一个比较安全的数据存储仓库。说仓库可能有点不太合适，因为它的容量比较小，浏览器对它的数量作了限制（不同浏览器限制的数量不同，有20个、30个、50个等等）。Cookie 一般是由服务器端生成并保存到浏览器中。

Cookie 家族成员

以掘金首页为例，打开控制台后可以看到 Cookie 的9个属性。

Name

必项。用来设置 Cookie 的名称。

Value

选填。名称对应的值。

Domain

选填。Cookie 所在的域名，默认写入当前域名。

Path

选填。该 Cookie 作用的路径。

Expires/Max-Age

选填。Cookie 的失效/删除时间，默认关闭浏览器页面时该 Cookie 失效/删除。

其中，Expires 的格式为 GMT （如："Wed, 07 Nov 2018 07:12:39 GMT" ）。它指定的是页面最后访问的时间，即绝对过期时间，是一个固定值。如果客户端和服务端 Expires 设定的不一致，会存在偏差（未验证）。

而 Max-Age 是页面访问后的存活时间，并不是固定值。它告诉浏览器此 Cookie 还有多久过期。它的单位是秒。

Max-Age 的优先级比 Expires 高。

Size

表示此条 Cookie 的大小，无法修改。

HTTP

服务端设定。如果将该属性设为true，那么前端通过js将会获取不到cookie信息，这样能有效的防止XSS攻击。（网上找的说明，未验证）。

Secure

服务器端设定。如果将其设为true，cookie只能用https协议发送给服务器端，不能通过http协议发送。 https 中的 s 不就是 secure的意思吗？不知道有没有这个说法。[滑稽]

SameSite

这个属性个人不是很明白，网上查了下，好像是防止 CSRF 攻击的，如果有兴趣的可以自己去了解一下。

加个下划线，毕竟上面的都是理论，下面的才是实践?。要不要一起敲敲看？

Cookie 的读/写/删除

读

// js 原生提供的方法，输出的是当前域名下的所有 Cookie，以 ';' 分隔。
document.cookie
复制代码

如果想获取某一个 Cookie 的值，那通过分隔符 ';' 这个特点，完全可以封装一个方法。

// 获取某个 Cookie 的值
function getCookie(name) {
    var arrCookies = document.cookie.split(';');
    for(var i=0; i<arrCookies.length; i++) {
        var newN = arrCookies[i].trim().split('=');
        if(newN[0] == name) {
            return newN[1];
        }else {
            alert('该 Cookie 不存在');
        }
    }
}
复制代码

写

Cookie 的写入和读取都是通过 document.getCookie

// 举个栗子
document.cookie = 'Gaara=Partiny;';
复制代码

只设置 Cookie 的 Name 和 Value 属性，域名默认是当前域名。

我们可以通过相同的方法，来为 Cookie 设置其他属性，属性之间用 ';' 分隔。

// 获取当前的时间戳
var ct = Date.parse(new Date());
// 获取当前时间，并在此基础上加30分钟
var dt = new Date(ct + 30*60*1000);
// 时间戳转为 GMT 格式
dt.toGMTString();
// 写入 Cookie，并设置 Expires
document.cookie = 'Gaara01=Partiny01;Expires='+dt;
复制代码

删除

Cookie 的删除和写入想法，写入是赋值，而删除就是赋空值，并将时间置为失效。

document.cookie = 'Gaara01=;Expires=Thu, 01 Jan 1970 00:00:00 GMT';
复制代码

如果要删除所有的 Cookie，与获取类似，也可以封装一个方法自己用。

不过我自己测试了一下，发现清除的都是通过 document.cookie 写进去的域名，原有的并没有清除掉，具体原理不太清楚。

// 清除所有 Cookie。 个人封装的，可能会有纰漏，望指正
function clearAllCookie() {
    var arrCookies = document.cookie.split(";");
    for (var i = 0; i < arrCookies.length; i++) {
        var c = arrCookies[i].trim();
        var isEqual = c.indexOf("=");
        var name = isEqual > -1 ? c.substr(0, isEqual) : c;
        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;";
    }
}
复制代码