参考：《JavaScript 高级程序设计》（第3版）

1. 背景

cookie 最初由网景公司创造，解决将数据存储在客户端上的问题。

Persistent Client State: HTTP Cookies（持久客户端状态：HTTP Cookies）的标准中对 cookie 进行了阐述，链接 => Client Side State - HTTP Cookies

2. 解释 

用来在客户端存储会话信息，以及和服务端进行通信。

HTTP Cookie 标准要求服务器对任意HTTP请求发送 Set-Cookie 响应头，其中包含会话信息。

• 响应头 Set-Cookie: name=value

浏览器接收到之后，把会话信息存储下来，并通过为每个请求添加 Cookie 请求头将信息发送回服务器。

• 请求头 Cookie: name=value

3. cookie 结构

以上每一段信息都作为 Set-Cookie 的一部分，使用分号加空格，分隔每一段，如下：

Set-Cookie: name=value; expires=Mon, 01-Jan-22 01:01:01 GMT; domain=.wrox.com; path=/; secure

以上信息头指定了一个叫name的cookie，它会在格林威治时间2022年1月1日 01:01:01 失效，同时对于wrox.com的任何子域都有效，但协议需要是https。

子cookie

为了绕开浏览器单域名下cookie数量限制，可以使用子cookie（subcookie）的概念来更加结构化的存储数据。

常见格式如下：name1=value1&name2=value2

4. cookie 限制

5. cookie 存储的位置

内存是临时存储（内存决定电脑能同时运行多少程序）；

硬盘是长久存储（硬盘决定电脑能存放多少东西）；

如果cookie有过期时间，就会被存储于硬盘中，过期后删除；

如果cookie没设置过期时间，就会被存储于内存中，会话结束时失效；

6. JavaScript中控制cookie

document.cookie 可用来获取、设置cookie。

/*** cookie的写入、读取、删除工具*/
var CookieUtil = {get: function (name) {let cookieName = encodeURIComponent(name) + "=",cookieStart = document.cookie.indexOf(cookieName),cookieValue = null;if (cookieStart > -1) {let cookieEnd = document.cookie.indexOf(";", cookieStart);if (cookieEnd == -1) {cookieEnd = document.cookie.length;}cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));}return cookieValue;},set: function (name, value, expires, path, domain, secure) {let cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);if (expires instanceof Date) {cookieText += "; expires=" + expires.toGMTString();}if (path) {cookieText += "; path=" + path;}if (domain) {cookieText += "; domain=" + domain;}if (secure) {cookieText += "; secure";}document.cookie = cookieText;},unset: function (name, path, domain, secure) {this.set(name, "", new Date(0), path, domain, secure);},
};// 调用
// 设置cookie
CookieUtil.set("name", "不头秃的码农");
CookieUtil.set("book","JavaScript",new Date("2022.11.30"),"/","baidu.com",true
);
// 读取cookie
console.log(CookieUtil.get("name"));
console.log(CookieUtil.get("book"));
// 删除cookie
CookieUtil.unset("name")
CookieUtil.unset("book")

7. 总结

由于所有的 cookie 都会由浏览器作为请求头发送，如果在 cookie 中存储大量的信息会影响特定域名的请求性能。cookie 信息越大，完成对服务器请求的时间就越长。再考虑到 cookie 有数量和大小的限制，所以尽可能少在 cookie 中存储信息。

不要在cookie中存储重要和敏感的隐私数据，cookie数据并非存储在一个安全环境中，其中包含的任何数据都可以被他人访问。