Cookie

Cookie：全称 HTTP Cookie，是浏览器存储数据的一种方式，存储在用户本地，一般会随着浏览器发送的请求自动发送到服务器端。

前后端都可以操作 Cookie。

浏览器发出的请求默认会携带 Cookie。
使用 Ajax 发送的请求，默认情况下，同域会携带 Cookie，跨域不会。

每个域名下的 Cookie 有数量限制，不同浏览器的限制不同。当超过单个域名限制之后，再设置新的 Cookie，浏览器就会清除最开始设置的 Cookie。
单个 Cookie 有大小限制，每个 Cookie 的存储容量很小，最多只有 4KB 左右。

通过 JS 操作 Cookie：

写入 Cookie：

document.cookie='username=Lee'
document.cookie='age=18'

document.cookie='username=Lee;age=18' // 错误。不能这样一起设置，只能一个一个设置

读取 Cookie：读取的是一个由名值对构成的字符串，每个名值对之间由一个分号和空格隔开。

读取的是全部的 Cookie，无法根据具体的名读取对应的值

document.cookie

删除 Cookie：可以设置 max-age 到期时间等于 0 或者负数来删除 Cookie。

document.cookie='username=Lee; max-age=0'

Cookie 的属性：

不能单单只通过 name 属性来判断是不是同一个 Cookie，只有name、domain、path 这三个字段都相同的时候，才是同一个 Cookie。
domain、path、secure 都满足条件，并且还未过期的 Cookie，才会随着 HTTP 请求发送到服务器端。

1. name 名称、value 值：是最重要的两个属性，创建 Cookie 时必须填写。其他属性可以不写使用默认值。

   Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码。

   document.cookie=`username=${encodeURIComponent('小明')}`
   

2. expires、max-age：到期时间。失效的 Cookie 会被浏览器自动清除。
   expires：值为 Date 类型，表示具体什么时间过期。
   max-age：值为数字，表示当前时间加多少秒后过期，单位是秒。如果 max-age 的值为 0 或者负数，那么这个 Cookie 会被删掉。

   如果没有设置到期时间，这样的 Cookie 称为会话 Cookie，它存在于内存中，当会话结束，也就是浏览器关闭（不是关闭当前标签页，而是整个浏览器都必须被关闭），Cookie 会被自动清除。

   // 属性之间由一个分号和空格隔开
   document.cookie=`username=Lee; expires=${new Date('2022-10-01 00:00:00')}`
   document.cookie='username=Lee; max-age=1000'
   

3. domain：域。限定了不同域名下可以访问的 Cookie 的范围。设置了 domain 的话，这个Cookie 只能在设置的域名及其子域名下访问。

   不设置 domain 的话，浏览器会自动把 Cookie 写入当前的域名下。
   使用 JS 只能读写当前域或者父域的 Cookie，无法读写其他域的 Cookie。

4. path：路径。限定了同一域名不同路径下可以访问的 Cookie 的范围。设置了 path 的话，这个 Cookie 只能在设置的路径及其下级路径下访问。

   不设置 domain 的话，浏览器会自动把 Cookie 写入当前的根路径下。
   使用 JS 只能读写当前路径或者上级路径的 Cookie，无法读写下级路径的 Cookie。

5. httpOnly：设置了 httpOnly 属性的 Cookie 不能通过 JS 去读写，只能后端来设置。
6. secure：限制了只有在使用 HTTPS 而不是 HTTP 的情况下才可以将 Cookie 发送给服务器端。