【document.cookie】在Web开发中，`document.cookie` 是一个非常重要的属性，用于读取、设置和删除浏览器中的Cookie。它提供了一种在客户端存储少量数据的方式，常用于用户身份验证、会话管理、个性化设置等场景。
以下是对 `document.cookie` 的总结性介绍，并以表格形式展示其关键信息。
一、
`document.cookie` 是 JavaScript 中用于操作 Cookie 的一个全局对象属性。通过这个属性，开发者可以获取当前页面的 Cookie 数据，也可以设置新的 Cookie 或更新已有的 Cookie。需要注意的是，`document.cookie` 是一个字符串，其中包含所有可用的 Cookie，格式为 `key=value` 对，多个 Cookie 之间用分号 `;` 分隔。
使用 `document.cookie` 设置 Cookie 时，可以通过添加额外的参数（如 `expires`、`path`、`domain`、`secure`）来控制 Cookie 的生命周期和作用域。而读取 Cookie 则需要对字符串进行解析，提取所需的数据。
由于 Cookie 存储在客户端，安全性较低，因此不建议存储敏感信息。同时，随着现代 Web 技术的发展，越来越多的开发者倾向于使用 `localStorage` 和 `sessionStorage` 来替代 Cookie，以提高安全性和灵活性。
二、表格展示
| 属性/方法 | 描述 | 示例 |
| `document.cookie` | 获取或设置当前文档的 Cookie 字符串 | `document.cookie = "username=John";` |
| `document.cookie.split(';')` | 将 Cookie 字符串按分号分割成数组 | `document.cookie.split(';').forEach(cookie => { ... })` |
| `cookie.split('=')[0]` | 提取 Cookie 的键名 | `cookie.split('=')[0].trim()` |
| `cookie.split('=')[1]` | 提取 Cookie 的值 | `cookie.split('=')[1]` |
| `expires=date` | 设置 Cookie 的过期时间（UTC 时间） | `document.cookie = "user=John; expires=Thu, 1 Jan 2025 00:00:00 GMT"` |
| `path=path` | 设置 Cookie 的访问路径 | `document.cookie = "user=John; path=/"` |
| `domain=domain` | 设置 Cookie 的域名 | `document.cookie = "user=John; domain=.example.com"` |
| `secure` | 仅通过 HTTPS 传输 Cookie | `document.cookie = "user=John; secure"` |
| `HttpOnly` | 防止 JavaScript 访问 Cookie（需服务器设置） | 由服务器设置，如 `Set-Cookie: user=John; HttpOnly` |
三、注意事项
- `document.cookie` 每次只能读取当前域名下的 Cookie。
- Cookie 有大小限制（通常为 4KB 左右）。
- 不推荐在 Cookie 中存储敏感信息，如密码或令牌。
- 使用 `localStorage` 或 `sessionStorage` 可作为更安全的替代方案。
通过合理使用 `document.cookie`，开发者可以在前端实现基本的用户状态管理和数据存储功能，但应结合实际需求选择最合适的存储方式。