九江 网站建设百度论坛首页官网
一、Cookie 核心概念
1. 定义与作用
- HTTP协议下的客户端存储技术，通过
document.cookie操作 - 特点：
- 自动随 HTTP 请求携带到服务器
- 跨域限制严格（同源策略）
- 存储容量 ≤ 4KB
- 仅支持字符串键值对
- 不安全，容易伪造
2. 生命周期控制
| 类型 | 特点说明 |
|---|---|
| 会话 Cookie | 浏览器关闭后自动清除 |
| 持久化 Cookie | 需手动设置 expires 过期时间 |
二、原生 Cookie 操作
1. 基础语法
// 设置（需手动处理日期格式）
document.cookie = "key=value; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"// 读取
console.log(document.cookie) // 返回所有 Cookie 字符串// 修改（重新赋值）
document.cookie = "key=newValue"// 删除（设置过期时间）
document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT"
2. 注意事项
- 多个 Cookie 通过
;分隔 - 修改/删除时需保持
path和domain一致 - 需手动处理日期格式（推荐使用
new Date()）
三、js-cookie 库增强方案
1. 引入方式
- 使用 CDN 引入
js-cookie库（版本 3.0.5），全局对象Cookies提供操作方法。 - 优势：跨浏览器兼容性好，简化原生
document.cookie的复杂操作。
<!-- CDN 引入（版本 3.0.5） -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.min.js"></script>
2. 核心 API
// 设置（自动序列化，支持配置项）
Cookies.set("key", value, { expires: 7, path: "/" })//expires:过期时间(天)// 读取（自动反序列化）
Cookies.get("key") // 删除
Cookies.remove("key", { path: "/" })
3. 优势对比
| 功能 | 原生 Cookie | js-cookie 库 |
|---|---|---|
| 数据类型 | 仅字符串 | 支持自动序列化对象/数组 |
| 过期时间 | 手动计算日期 | 直接传天数（如 7），未指定则默认为会话 Cookie（关闭浏览器失效） |
| 路径控制 | 字符串拼接 | 参数化配置 |
| 跨浏览器兼容 | 存在兼容性问题 | 自动适配主流浏览器 |
4. 数据序列化实践
1) 存储复杂数据
// 序列化（存入前）
const data = ["蔡徐坤", "吴彦祖"];
Cookies.set("list", JSON.stringify(data));// 反序列化（读取时）
const storedData = JSON.parse(Cookies.get("list"));
2) 安全建议
- 敏感数据加密存储（如使用 Base64 编码）
- 避免存储用户凭证等敏感信息
- 关键数据配合服务端验证
5. 最佳实践指南
优先选择场景
- 需要跨会话保持状态（如用户登录）
- 需要服务端读取的场景（如 token 存储）
替代方案建议
- 优先级：
localStorage > sessionStorage > Cookie - 大容量存储建议使用
localStorage（最大 5MB）
调试技巧
- 浏览器开发者工具 → Application → Cookies 查看
- 使用
console.log(Cookies.get())打印所有 Cookie
注意：跨域场景需设置
domain和path参数（如domain: ".example.com"实现二级域名共享）