JavaScript Cookies介绍
封面图
•
2025-12-31
•
JavaScript
251
0
0
0
JavaScript 中的 **Cookies** 是一种在客户端(浏览器)存储数据的方式,通常用于记录用户信息、会话状态等。它们由服务器通过 HTTP 响应头 `Set-Cookie` 发送,并由浏览器保存,之后每次请求该网站时都会自动将 cookies 附加到 HTTP 请求头中。 --- ## 🧩 一、什么是 Cookies? Cookies 是小文本文件,存储在用户的计算机上,包含以下信息: - 名称(Name) - 值(Value) - 过期时间(Expires/Max-Age) - 路径(Path) - 域名(Domain) - 安全性(Secure) - HttpOnly 标志 --- ## 📌 二、Cookies 的用途 1. **会话管理**:比如登录状态、购物车信息。 2. **个性化设置**:如语言偏好、主题选择。 3. **跟踪用户行为**:用于分析或广告投放(需注意隐私政策)。 4. **保持用户登录状态**:通过 session ID 等方式实现。 --- ## 💻 三、JavaScript 如何操作 Cookies? ### ✅ 1. 读取 Cookies ```javascript document.cookie; // 获取所有 cookie 字符串 ``` 返回格式类似: ``` username=JohnDoe; age=30; theme=dark ``` ### ✅ 2. 设置 Cookie ```javascript document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/"; ``` - `expires`:设置过期时间(可选) - `path`:指定 cookie 的路径(默认是当前路径) - `domain`:指定域名(默认是当前域名) - `secure`:只在 HTTPS 下发送 - `HttpOnly`:防止 JavaScript 访问(安全) > 注意:使用 `HttpOnly` 需要通过服务器设置。 ### ✅ 3. 删除 Cookie 要删除一个 cookie,可以将其过期时间设为过去的时间: ```javascript document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/"; ``` --- ## ⚠️ 四、注意事项 | 项目 | 说明 | |------|------| | 大小限制 | 每个 cookie 最大 4KB,每个域名最多 20 个 cookie | | 安全性 | 不适合存储敏感信息(如密码),建议使用 `HttpOnly` 和 `Secure` | | 跨域问题 | 默认不跨域,需要设置 `domain` 和 `path` | | 存储位置 | 浏览器本地存储,不会自动加密 | --- ## 🔐 五、Cookie 与 LocalStorage 的区别 | 特性 | Cookie | localStorage | |------|--------|--------------| | 存储位置 | 浏览器 | 浏览器 | | 存储大小 | 4KB/cookie,20 per domain | 5MB | | 自动发送 | 是(随请求发送) | 否 | | 有效期 | 可设置过期时间 | 永久 | | 安全性 | 可被 JS 读写 | 可被 JS 读写 | | 是否支持跨域 | 需配置 domain/path | 不支持跨域 | --- ## 📚 六、示例代码 ```javascript // 设置 cookie document.cookie = "user=alice; max-age=3600; path=/; secure"; // 读取 cookie console.log(document.cookie); // 删除 cookie document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; ``` --- ## 🧠 七、总结 - Cookies 是客户端存储数据的一种方式,常用于会话管理和用户跟踪。 - JavaScript 提供了 `document.cookie` API 来操作 cookies。 - 使用时要注意安全性、大小限制和隐私合规性(如 GDPR)。 如果你有具体的应用场景或想了解更高级的功能(如 Session Storage、LocalStorage、Web Storage 等),欢迎继续提问!
上一篇:
javascript实现Ajax
下一篇:
麦肯锡/波士顿咨询的行业白皮书
标题录入,一次不能超过6条
留言
评论