🥇 什么是 Cookie

HTTP 是无状态的协议（对于事务处理没有记忆能力，每次客户端和服务端会话完成时，服务端不会保存任何会话信息）：每个请求都是完全独立的，服务端无法确认当前访问者的身份信息，无法分辨上一次的请求发送者和这一次的发送者是不是同一个人。所以服务器与浏览器为了进行会话跟踪（知道是谁在访问我），就必须主动的去维护一个状态，这个状态用于告知服务端前后两个请求是否来自同一浏览器。而这个状态需要通过 cookie 或者 session 去实现。
cookie 存储在客户端： cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。
cookie 是不可跨域的：每个 cookie 都会绑定单一的域名，无法在别的域名下获取使用，一级域名和二级域名之间是允许共享使用的（靠的是 domain）。

🥇 cookie

cookie 不可跨域
cookie 存储在浏览器里面
cookie 有数量和大小的限制

  1.  数量在 50 个左右
  2. 大小在 4kb 左右

cookie 的存储时间非常灵活
cookie 服务器可以设置，客户端也可以设置

🥇 前端设置 cookie

// 设置 cookie
document.cookie="name=value"
// 读取 cookie
console.log(document.cookie);

🥇 cookie 的属性

name：cookie 的名字，唯一性
value：cookie 的值
domain：设置 cookie 在哪个域下是有效的
path：设置 cookie 的路径
expires：cookie 的过期时间（到时间时间过去）
max-age：cookie 的有效期（保存多长时间）
HttpOnly：有这个标记的 cookie 前端无法获取
Secure：设置 cookie 只能通过 https 协议传输
SameSite：设置 cookie 在跨域请求的时候不能被发送

🥇 组成

Cookie 是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。其中：

  1. Name/Value：设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌  。
  2. Expires属性：设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效 。
  3. Path属性：定义了Web站点上可以访问该Cookie的路径 。
  4. Domain属性：指定了可以访问该 Cookie 的 Web 站点或域。Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻击的危险，比如攻击者可以借此发动会话定置攻击。因而，浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻击发生的范围 。
  5. Secure属性：指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到SSL证书无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。由于许多用户缺乏安全意识，因而仍可能连接到Pharming攻击所伪造的网站 [3]  。
  6. HTTPOnly 属性 ：用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头  。
  7. SameSite 属性：Chrome 51 开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪。Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。
     1. 它可以设置三个值。
        1. Strict：最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。
        2. Lax：规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。

        3. None：Chrome 计划将Lax变为默认设置。这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

🥇 封装 cookie

let manageCookie = {
  // 设置 cookie
  ste(name, value, data) {
    // expires 方法   data: 默认为天数
    let endData = new Data();
    endDate.setData(endDate.getDate() + date)
    document.cookie = name + '=' + value + ';expires' + endData;
    // max-age 方法   data: 默认为保持的秒数
    document.cookie = name + '=' + value + ';max-age=' + data;
  },
  // 移除 cookie
  remove(name) {
    // 只需要将时间设置为 0 就可以了
    this.set(name, '', 0)
  },
  // 获取 cookie
  get(name) {
    var cookie = document.cookie.split('; ');
    for (var i = 0; i < cookie.length; i++) {
      var item = cookie[i].split('=');
      if (item[0] == name) {
        return item[1]
      }
    }
  }
}