每个域名最多可存储多少个 Cookie？使用场景是什么？底层原理是什么？

1. 每个域名最多可存储多少个 Cookie？

想象一下，你在一家咖啡店点餐：

• 你需要一张会员卡（Cookie）来记录你的偏好（如喜欢的咖啡类型）。
• 在浏览器中，每个域名的“会员卡”数量是有限的，不能无限存储。

(1) 核心限制

• 每个域名的 Cookie 数量限制：
  • 大多数现代浏览器对每个域名允许存储的 Cookie 数量有上限，通常是 50 个。
  • 如果超过这个限制，旧的 Cookie 可能会被删除或覆盖。
• 单个 Cookie 的大小限制：
  • 每个 Cookie 的大小限制为 4KB（包括键、值和属性）。
• 总 Cookie 存储限制：
  • 每个域名的总 Cookie 数据通常限制在 4KB × 50 = 200KB 左右。

(2) 示例

document.cookie = "name=Alice; path=/";
document.cookie = "age=25; path=/";
// 如果超过 50 个 Cookie，可能会触发浏览器的清理机制

---

2. 使用场景是什么？

(1) 用户登录状态

• 场景：通过 Cookie 保存用户的登录信息（如会话 ID）。
• 示例：

  document.cookie = "session_id=abc123; path=/; HttpOnly; Secure";
  

(2) 用户偏好设置

• 场景：保存用户的语言、主题等偏好。
• 示例：

  document.cookie = "language=en-US; path=/";
  document.cookie = "theme=dark; path=/";
  

(3) 购物车功能

• 场景：保存用户的购物车内容。
• 示例：

  document.cookie = "cart=item1,item2; path=/";
  

(4) 第三方追踪

• 场景：广告平台通过 Cookie 追踪用户行为。
• 示例：

  document.cookie = "tracking_id=xyz456; domain=.adnetwork.com; path=/";
  

(5) 分布式系统

• 场景：跨多个子域名共享 Cookie。
• 示例：

  document.cookie = "user_id=123; domain=.example.com; path=/";
  

---

3. 底层原理是什么？

(1) HTTP 协议中的 Cookie

• 请求头与响应头：
  • 客户端通过 Cookie 请求头发送 Cookie 数据。
  • 服务器通过 Set-Cookie 响应头设置 Cookie。
  • 示例：

    Set-Cookie: name=Alice; Path=/; HttpOnly; Secure
    

(2) 浏览器实现

• 存储机制：
  • 浏览器将 Cookie 存储在本地文件或内存中。
  • 每次请求时，浏览器会自动将与当前域名匹配的 Cookie 添加到请求头中。
• 清理机制：
  • 如果超过数量或大小限制，浏览器会按照一定的规则清理旧的 Cookie。

(3) 属性解析

• Path 和 Domain：
  • Path 决定了 Cookie 的作用范围（如 / 表示整个网站）。
  • Domain 决定了 Cookie 的作用域（如 .example.com 表示所有子域名）。
• Expires 和 Max-Age：
  • Expires 设置 Cookie 的过期时间。
  • Max-Age 设置 Cookie 的有效时间（以秒为单位）。
• HttpOnly 和 Secure：
  • HttpOnly 防止 JavaScript 访问 Cookie，降低 XSS 攻击风险。
  • Secure 确保 Cookie 仅通过 HTTPS 传输。

(4) 安全性

• XSS 攻击防护：
  • 使用 HttpOnly 属性防止恶意脚本窃取 Cookie。
• CSRF 攻击防护：
  • 使用 SameSite 属性限制 Cookie 的跨站发送。

---

4. 图示说明

(1) Cookie 存储限制

每个域名最多存储 50 个 Cookie
+--------------------------+
| Cookie 1                 |
+--------------------------+
| Cookie 2                 |
+--------------------------+
| ...                      |
+--------------------------+
| Cookie 50                |
+--------------------------+

每个 Cookie 最大 4KB
+--------------------------+
| name=Alice               |
| age=25                   |
| language=en-US           |
| theme=dark               |
| ...                      |
+--------------------------+

(2) Cookie 属性

Set-Cookie: name=Alice; Path=/; Domain=.example.com; Expires=Wed, 01 Jan 2024 00:00:00 GMT; HttpOnly; Secure; SameSite=Lax
+--------------------------+
| name                     | （Cookie 名称）
+--------------------------+
| value                    | （Cookie 值）
+--------------------------+
| Path                     | （作用路径）
+--------------------------+
| Domain                   | （作用域）
+--------------------------+
| Expires                  | （过期时间）
+--------------------------+
| HttpOnly                 | （禁止 JavaScript 访问）
+--------------------------+
| Secure                   | （仅通过 HTTPS 传输）
+--------------------------+
| SameSite                 | （防止 CSRF 攻击）
+--------------------------+

---

5. 总结

(1) 核心限制

• 每个域名最多存储 50 个 Cookie。
• 单个 Cookie 的大小限制为 4KB。
• 总 Cookie 数据限制约为 200KB。

(2) 使用场景

• 用户登录状态。
• 用户偏好设置。
• 购物车功能。
• 第三方追踪。
• 分布式系统。

(3) 底层原理

• HTTP 协议：基于 Cookie 请求头和 Set-Cookie 响应头。
• 浏览器实现：存储机制和清理机制。
• 属性解析：Path、Domain、Expires、HttpOnly、Secure、SameSite。
• 安全性：防止 XSS 和 CSRF 攻击。