Cookie存储

一、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" 实现二级域名共享）