概述

定义：
Cookie是一种浏览器的存储机制，是服务器保存在浏览器的一小段文本
特性：
1. 每一个Cookie保存的信息非常有限，根据浏览器的不同，一般在4kb左右
2. 浏览器自动携带，当浏览器中保存的Cookie属性满足某个http请求时，会自动带上Cookie
用途：
1. 会话管理：保存用户登录状态等信息
2. 个性化信息：保存用户的偏好，比如网页设置的字体，主题颜色等
3. 追踪用户：记录和分析用户行为
缺点
1. 容量小，一般只有4kb
2. 缺乏数据操作接口，并且影响性能
元数据
1. 名字
2. Cookie值
3. 到期时间，超过该时间Cookie会失效
4. 所属域名，默认当前域名，不包含协议
5. 生效路径，默认为当前网址，即/

tips：并不是所有服务器传过来的Cookie都会保存在浏览器中，通过window.navigator.cookieEnabled查看浏览器是否打开了Cookie

window.navigator.cookieEnabled // true
复制代码

document.cookie属性可以返回当前网页的cookie

Cookie的生成

服务器生成

服务器想要浏览器保存Cookie，需要先http请求的响应头中增加Set-Cookie字段

Set-Cookie:name=foo
复制代码

以上方式在浏览器中保存了一个名为name的Cookie，值为foo

一个请求响应中可以设置多个Cookie（每个大小不能超过4kb）

Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
复制代码

一个Cookie里面，可以同时包括多个属性，每个属性间用;隔开，一个完整的Cookie大概是以下格式,后面我们会讲解每个属性的含义及用法

Set-Cookie: key1=value1; domain=example.com; path=/blog; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
复制代码

总结：通过http请求设置Cookie，一个请求可以设置多个Cookie，一个Cookie可以设置多个属性

浏览器生成

document.cookie属性是一个可读写的属性,通过一下方式可以设置Cookie

document.cookie = "foo=bar; expires=Fri, 31 Dec 2020 23:59:59 GMT";
复制代码

各个属性的写入注意点如下。

path属性必须为绝对路径，默认为当前路径。
domain属性值必须是当前发送 Cookie 的域名的一部分。比如，当前域名是example.com，就不能将其设为foo.com。该属性默认为当前的一级域名（不含二级域名）。
max-age属性的值为秒数。
expires属性的值为 UTC 格式，可以使用Date.prototype.toUTCString()进行日期格式转换。

Cookie的修改

想要修改之前设置好的一个Cookie，必须满足以下四个条件，缺一不可

key相同，也就是Cookie名相同
domain匹配
path匹配
secure匹配

// 首先设置一个Cookie
Set-Cookie: key1=value1; domain=example.com; path=/blog; secure

// 修改上面的Cookie
Set-Cookie: key1=value2; domain=example.com; path=/blog; secure
复制代码

Cookie的发送

浏览器向服务器发送http请求时，会将浏览器中存储的满足条件的Cookie携带在请求头的Cookie字段中，其中这个行为是浏览器自动的

Cookie:name=foo
复制代码

如果在一个请求中，有多个Cookie满足发送条件，那么这个请求中会将多个Cookie都携带上

Cookie:name=foo;age=12;gender=male
复制代码

服务器收到浏览器发送过来的Cookie后，以下两点是服务器无法知道的

Cookie的各种属性，因为发送的时候不会将属性也发送到服务器
Cookie的域名，到底是一级域名还是某个二级域名

Cookie删除

通过将一个Cookie的Expiers属性设置为一个过去的时间，可以达到删除Cookie的目的

Cookie属性解析

Domain

Domain属性指定浏览器发出 HTTP 请求时，哪些域名要附带这个 Cookie。如果没有指定该属性，浏览器会默认将其设为当前域名，这时子域名将不会附带这个 Cookie。比如，example.com不设置 Cookie 的domain属性，那么sub.example.com将不会附带这个 Cookie。如果指定了domain属性，那么子域名也会附带这个 Cookie。如果服务器指定的域名不属于当前域名，浏览器会拒绝这个 Cookie

Path

Path属性指定浏览器发出 HTTP 请求时，哪些路径要附带这个 Cookie。只要浏览器发现，Path属性是 HTTP 请求路径的开头一部分，就会在头信息里面带上这个 Cookie。比如，PATH属性是/，那么请求/docs路径也会包含该 Cookie。当然，前提是域名必须一致。

Secure

Secure属性指定浏览器只有在加密协议 HTTPS 下，才能将这个 Cookie 发送到服务器。另一方面，如果当前协议是 HTTP，浏览器会自动忽略服务器发来的Secure属性。该属性只是一个开关，不需要指定值。如果通信是 HTTPS 协议，该开关自动打开。

Expires、Max-Age

Expires属性指定一个具体的到期时间，到了指定时间以后，浏览器就不再保留这个 Cookie。它的值是 UTC 格式，可以使用Date.prototype.toUTCString()进行格式转换

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
复制代码

如果不设置该属性，或者设为null，Cookie 只在当前会话（session）有效，浏览器窗口一旦关闭，当前 Session 结束，该 Cookie 就会被删除。另外，浏览器根据本地时间，决定 Cookie 是否过期，由于本地时间是不精确的，所以没有办法保证 Cookie 一定会在服务器指定的时间过期。

Max-Age属性指定从现在开始 Cookie 存在的秒数，比如60 * 60 * 24 * 365（即一年）。过了这个时间以后，浏览器就不再保留这个 Cookie。

如果同时指定了Expires和Max-Age，那么Max-Age的值将优先生效。

如果Set-Cookie字段没有指定Expires或Max-Age属性，那么这个 Cookie 就是 Session Cookie，即它只在本次对话存在，一旦用户关闭浏览器，浏览器就不会再保留这个 Cookie。

HttpOnly

HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到，主要是document.cookie属性、XMLHttpRequest对象和 Request API 都拿不到该属性。这样就防止了该 Cookie 被脚本读到，只有浏览器发出 HTTP 请求时，才会带上该 Cookie