【document.cookie】`document.cookie` 是 JavaScript 中用于操作浏览器 Cookie 的一个属性，它允许开发者读取、设置和删除网页的 Cookie。通过 `document.cookie`，可以实现用户身份验证、个性化设置、跟踪用户行为等功能。然而，由于 Cookie 存在安全性和隐私方面的隐患，现代 Web 开发中越来越多地使用 `localStorage` 和 `sessionStorage` 作为替代方案。以下是对 `document.cookie` 的功能、用法及注意事项的总结。
document.cookie 功能与用法总结表
| 功能 | 描述 | 示例代码 |
| 读取 Cookie | 通过 `document.cookie` 获取当前页面的所有 Cookie 数据 | `console.log(document.cookie);` |
| 设置 Cookie | 通过赋值操作设置 Cookie，需指定名称、值、过期时间等 | `document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC";` |
| 删除 Cookie | 通过设置过期时间为过去的时间来删除 Cookie | `document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";` |
| Cookie 属性 | 支持 `expires`、`path`、`domain`、`secure`、`HttpOnly` 等属性 | `document.cookie = "user=alice; path=/; domain=example.com; secure"` |
| 安全性限制 | Cookie 可被客户端脚本访问，存在 XSS 风险；建议使用 `HttpOnly` 保护 | `document.cookie = "token=abc123; HttpOnly"` |
| 跨域问题 | Cookie 默认不支持跨域，需配置 `SameSite` 和 `domain` 属性 | `document.cookie = "auth=xyz; SameSite=Strict; domain=example.com"` |
注意事项：
- `document.cookie` 返回的是字符串形式的 Cookie 列表，各 Cookie 之间以分号分隔。
- 设置 Cookie 时，若未指定 `expires` 或 `max-age`，则会创建一个会话 Cookie，浏览器关闭后自动清除。
- 使用 `HttpOnly` 属性可防止 JavaScript 访问 Cookie，提高安全性。
- 在现代开发中，推荐使用 `localStorage` 和 `sessionStorage` 替代部分 Cookie 功能，以提升性能和安全性。
结语：
`document.cookie` 是前端开发中常用的工具，但在使用过程中需注意其安全性和局限性。合理使用 Cookie 能有效增强用户体验，但同时也应关注数据隐私和安全防护措施。
