cookie

cookie

JavaScript 的 Cookie 是存储在用户浏览器中的小型文本数据，用于跟踪用户会话、存储用户偏好或其他需要在浏览器和服务器之间传递的信息。Cookie 由服务器通过 HTTP 头（Set-Cookie）发送到浏览器，浏览器会保存这些数据，并在后续请求中自动附加到 HTTP 头（Cookie）中返回给服务器。

Cookie 的核心特性

1. 存储大小：单个 Cookie 大小通常限制为 4KB，每个域名下的 Cookie 数量有限（通常 50 个左右）。
2. 生命周期：
   • 会话 Cookie：浏览器关闭后自动删除（未设置 Expires 或 Max-Age）。
   • 持久 Cookie：通过 Expires 或 Max-Age 设置过期时间。
3. 作用域：
   • Domain：指定哪些域名可以访问 Cookie（默认为当前域名）。
   • Path：指定 URL 路径下才能访问 Cookie（默认为当前路径）。

---

JavaScript 操作 Cookie

通过 document.cookie API 可以读写 Cookie，但需手动处理字符串格式。

1. 创建/修改 Cookie

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

• 键值对格式：key=value。
• 可选属性用分号分隔：expires, max-age, path, domain, secure, samesite。

2. 读取 Cookie

const cookies = document.cookie; // 返回所有 Cookie，如 "username=John; theme=dark"
// 解析 Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
console.log(getCookie("username")); // 输出 "John Doe"

3. 删除 Cookie

将 Cookie 的过期时间设为过去的时间：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

---

Cookie 属性详解

1. Expires 和 Max-Age：
   • Expires：指定过期时间（UTC 格式）。
   • Max-Age：指定存活秒数（优先级高于 Expires）。
2. Domain：
   • 默认仅当前域名可用，设置 Domain=example.com 允许子域名（如 sub.example.com）访问。
3. Path：
   • 限制 Cookie 仅在特定路径下有效（如 Path=/admin）。
4. Secure：
   • 仅通过 HTTPS 协议传输 Cookie。
5. HttpOnly：
   • 阻止 JavaScript 访问 Cookie（防 XSS 攻击），只能由服务器设置。
6. SameSite：
   • Strict：仅同站请求发送 Cookie。
   • Lax：允许部分跨站请求（如导航链接）。
   • None：允许跨站请求（需配合 Secure）。

---

安全性注意事项

• 敏感信息：避免在 Cookie 中存储密码等敏感数据。
• HttpOnly：对身份验证 Cookie 启用此属性，防止 XSS 攻击窃取。
• Secure：确保通过 HTTPS 传输敏感 Cookie。
• SameSite：设置 Lax 或 Strict 防止 CSRF 攻击。

---

实际应用场景

7. 用户认证：服务器发送 Session ID 作为 Cookie，用于识别用户登录状态。
8. 个性化设置：存储用户主题、语言偏好。
9. 购物车：临时保存用户选择的商品。
10. 跟踪与分析：记录用户行为（需符合隐私政策如 GDPR）。

---

Cookie 的替代方案

• localStorage 和 sessionStorage：
  • 存储容量更大（约 5MB）。
  • 数据仅存于客户端，不自动发送到服务器。
  • 无过期时间（localStorage）或会话级（sessionStorage）。
• JWT（JSON Web Token）：用于无状态身份验证，替代 Session Cookie。

---

总结

Cookie 是 Web 开发中实现状态管理的基础工具，但需谨慎处理安全性和隐私问题。现代开发中，可结合 Cookie 与其他存储技术（如 localStorage）以满足不同需求。对于敏感操作，务必遵循安全最佳实践。