Cookie 和 Token

Cookie：

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

Cookie 出现的原因：

Cookie 的出现，是来弥补 HTTP 无状态的问题的。

由于 HTTP 是无状态的，因此每次连接都需要重新验证身份。Cookie 可以作为一个状态保存的状态机，用来保存用户的相关登录状态；当第一次验证通过后，服务器可以通过 Set-Cookie 令客户端将自己的 Cookie 保存起来；当下一次再发送请求的时候，直接带上 Cookie 即可，服务器在检测到客户端发送的 Cookie 与其保存的 Cookie 值保持一致时，则直接信任该连接，不再进行验证操作。

Cookie 的缺点：

1. Cookie 会在每次浏览器与服务器进行同源通信时都自动包含在 HTTP 请求中，无论服务器是否需要这些数据，可能会浪费一部分的带宽。

   同域会携带 Cookie，跨域不会。

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

Cookie 的工作流程：

一般来说，都是第一次登录请求后，服务器将 Cookie 返回给浏览器，之后浏览器每次请求都自动带上，以让服务器识别用户身份。

1. 当服务器接收到 HTTP 请求，要返回 HTTP 响应时，可以生成一个 Cookie 并将其设置到响应头 Set-Cookie中。
2. 浏览器在接收到响应后会自动将 Cookie 保存下来。
3. 之后浏览器对该服务器的每一次请求，都会自动地通过请求头 cookie 将 Cookie 发送给服务器。
4. 服务器就可以根据 Cookie 跟踪客户端状态。

Cookie 的属性：

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

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

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

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

2. domain：域。限定了可以访问当前 Cookie 的域名范围。设置了 domain 的话，当前Cookie 只能在设置的域名及其子域名下访问。

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

3. path：路径。限定了可以访问当前 Cookie 的地址范围。设置了 path 的话，当前 Cookie 只能在设置的路径及其下级路径下访问。

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

4. 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'
   

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

通过 JS 操作 Cookie：

前后端都可以操作 Cookie。

写入 Cookie：

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

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

读取 Cookie：

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

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

document.cookie

修改 Cookie：

只需要新建一个同名的 Cookie 来覆盖原来Cookie。

删除 Cookie：

可以设置 max-age 到期时间等于 0 或者负数；或者设置 expires 为当前时间之前的时间，即可删除 Cookie。

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

Token：

Token：令牌。就是类似 Cookie 的一种验证信息。客户端通过登录验证后，服务器会返回给客户端一个加密的 Token；当客户端再次向服务器发起连接时，带上 Token；服务器直接对 Token 进行校验即可完成身份校验。

Token 出现的原因：

Cookie 作为 HTTP 规范，存在自动保存、自动发送、跨域限制、限制存储数量和大小等问题。相较于 Cookie，Token 需要自己存储、自己发送、不存在跨域限制、存储数量和大小更多更大，因此 Token 更加的灵活。

Token 的工作流程：

和 Cookie 类似。

一般来说，都是第一次登录请求后，服务器将 Token 返回给浏览器，之后浏览器在需要的请求中带上，以让服务器识别用户身份。