js cookie 各属性的作用

JavaScript 中的 Cookie 通过一系列属性控制其行为和安全性。以下是各属性的详细作用及注意事项：

---

1. name 和 value

• 作用：必需字段，存储 Cookie 的实际数据。
  • name 是 Cookie 的标识符。
  • value 是存储的值，需用 encodeURIComponent 编码（如含特殊字符）。
• 示例：username=John%20Doe

---

2. expires

• 作用：设置 Cookie 的过期时间（GMT 格式字符串）。未设置时，Cookie 在会话结束后失效（关闭浏览器）。
• 示例：

  const date = new Date();
  date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000); // 7天后过期
  document.cookie = `user=John; expires=${date.toUTCString()}`;
  

---

3. path

• 作用：限制 Cookie 的路径范围。只有匹配该路径的请求才会携带 Cookie。
  • 默认：当前页面的路径（如 /blog/post，仅该路径及其子路径有效）。
  • 建议：设为根路径 path=/ 以全局可用。
• 示例：path=/docs（允许 /docs 和 /docs/tutorial 访问）。

---

4. domain

• 作用：指定 Cookie 生效的域名（含子域名）。
  • 默认：当前主机名（如 www.example.com，不包含子域名）。
  • 若设为 .example.com，则所有子域名（如 sub.example.com）均可访问。
• 限制：不能设置为非当前域的父域或无关域。
• 示例：domain=.example.com

---

5. secure

• 作用：仅在 HTTPS 协议下传输 Cookie，防止被中间人窃取。
  • 非 HTTPS 环境下设置此属性会被浏览器忽略。
• 示例：secure（无需赋值，存在即生效）。

---

6. SameSite

• 作用：控制跨站点请求是否发送 Cookie，防范 CSRF 攻击。
  • 可选值：
    • Strict：仅同站点请求发送（严格安全）。
    • Lax（默认）：允许导航到目标站点的 GET 请求（如链接跳转）。
    • None：允许跨站点发送，但必须同时设置 secure（仅限 HTTPS）。
• 示例：samesite=Lax

---

注意事项

1. 属性顺序无关：各属性用分号分隔，顺序不影响。

   document.cookie = "name=value; expires=date; path=/; secure";
   

2. 编码处理：名称和值中的空格、分号等需用 encodeURIComponent 转义。
3. 不可通过 JS 设置的属性：如 HttpOnly（防范 XSS，仅服务端设置）。
4. 浏览器兼容性：SameSite 的默认值可能因浏览器而异（如 Chrome 默认 Lax）。

---

完整示例

document.cookie = `token=abc123; expires=${new Date(2025, 0, 1).toUTCString()}; path=/; domain=.example.com; secure; samesite=None`;

通过合理配置这些属性，可以精确控制 Cookie 的作用域、安全性和生命周期，确保应用的安全与用户体验。