【document.cookie（设置cookie）】在Web开发中，`document.cookie` 是一个非常常用的API，用于读取、设置和删除浏览器中的Cookie。它虽然简单，但功能强大，是前端与后端进行数据交互的重要工具之一。
一、总结
`document.cookie` 是JavaScript中用于操作Cookie的全局对象。通过它，开发者可以轻松地在客户端存储少量的数据，并在后续请求中发送给服务器。以下是关于 `document.cookie` 的关键知识点：
- 设置Cookie：使用 `document.cookie = "key=value"`。
- 获取Cookie：通过 `document.cookie` 可以读取所有当前可用的Cookie。
- 删除Cookie：通过设置过期时间为过去的时间来实现。
- 安全性：建议使用 `HttpOnly` 和 `Secure` 标志提高安全性。
- 限制：每个域名下的Cookie数量和大小有限制。
二、表格对比
| 操作 | 方法 | 示例代码 | 说明 |
| 设置Cookie | `document.cookie = "name=value";` | `document.cookie = "username=JohnDoe; path=/; max-age=3600";` | 设置一个名为 `username`、值为 `JohnDoe` 的Cookie，有效期为1小时，路径为根目录。 |
| 获取Cookie | `document.cookie` | `const cookies = document.cookie.split('; ');` | 返回当前页面的所有Cookie，需手动解析。 |
| 删除Cookie | `document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";` | `document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";` | 通过设置过期时间为过去时间来删除指定Cookie。 |
| 设置路径 | `path=/` | `document.cookie = "sessionid=abc123; path=/admin";` | 控制Cookie的有效路径。 |
| 设置域 | `domain=example.com` | `document.cookie = "user=123; domain=example.com";` | 控制Cookie的有效域名。 |
| 设置安全标志 | `secure` | `document.cookie = "token=xyz; secure";` | 确保Cookie仅通过HTTPS传输。 |
| 设置HttpOnly | `httpOnly` | `document.cookie = "auth_token=abc; httpOnly";` | 防止JavaScript访问该Cookie，提升安全性。 |
三、注意事项
- Cookie大小限制：通常每个Cookie不超过4KB，总大小限制约为5MB。
- 隐私问题：不应在Cookie中存储敏感信息（如密码）。
- 跨域问题：Cookie默认只对同一域名有效，跨域时需要设置 `domain` 和 `path`。
- 现代替代方案：对于更复杂的数据存储，推荐使用 `localStorage` 或 `sessionStorage`。
四、结语
`document.cookie` 虽然简单，但在实际项目中应用广泛。掌握其基本用法和注意事项，有助于提升Web应用的安全性和用户体验。在开发过程中，合理使用Cookie，避免滥用，是每一位前端工程师应具备的基本技能。
