深入解析 Cookie、sessionStorage 和 localStorage 的区别

Cookie、sessionStorage、localStorage 这三个东西，日常开发里几乎天天见：登录态、埋点、用户偏好、临时缓存……

它们的区别不只是“大小不一样”，更关键的是：生命周期、是否随请求携带、以及安全边界。选错了要么拖慢请求，要么埋下安全坑。

1. 容量限制与数据格式

存储方式	容量限制	数据格式
Cookie	4KB	只能存储字符串
sessionStorage	约 5MB	只能存储字符串（可转换为 JSON）
localStorage	约 5MB	只能存储字符串（可转换为 JSON）

补一句：虽然 sessionStorage/localStorage 只能存字符串，但可以用 JSON.stringify() 存对象，取出时 JSON.parse() 还原。

const user = { name: "张三", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // 张三

2. 生命周期

存储方式	生命周期
Cookie	可设置过期时间（会话级或持久化）
sessionStorage	仅在当前标签页（session）有效，关闭页面即清除
localStorage	永久存储，除非手动删除或用户清理缓存

很多人会误以为 sessionStorage 是“关闭浏览器就清”，更准确的说法是：它跟着 tab 走，关掉那个标签页就清，其他标签页互不影响。

3. 数据传输与请求影响

存储方式	是否随 HTTP 请求发送
Cookie	是（默认随每个请求发送）
sessionStorage	否（存储仅限于前端）
localStorage	否（存储仅限于前端）

性能影响： 由于 Cookie 会在每次请求时被自动携带，过多的 Cookie 可能会影响页面加载速度。因此，在存储不需要与服务器交互的数据时，推荐使用 sessionStorage 或 localStorage。

4. 安全性对比

存储方式	XSS 攻击风险	CSRF 攻击风险
Cookie	高（可用 HttpOnly 降风险）	高（请求自动携带）
sessionStorage	高（JS 可访问）	低（不会随请求发送）
localStorage	高（JS 可访问）	低（不会随请求发送）

安全性建议：

Cookie： 使用 HttpOnly 防止 JavaScript 访问，使用 Secure 仅允许 HTTPS 传输。
localStorage & sessionStorage： 防范 XSS 攻击，避免直接存储敏感信息，如 JWT Token 建议存放在 HttpOnly Cookie。

5. 适用场景

场景	推荐使用的存储方式
用户登录状态（长时间保持）	Cookie（带 HttpOnly）
短期数据存储（如表单未提交内容）	sessionStorage
持久化用户偏好设置	localStorage
避免请求时携带额外数据	sessionStorage/localStorage

6. 实战里怎么选？

最常见的争议点是“Token 放哪”。我的原则很简单：

能用 HttpOnly Cookie 就优先用（JS 读不到，XSS 风险小很多）
必须前端可读的东西（比如一些非敏感缓存），再考虑 sessionStorage/localStorage
别把敏感信息当成“方便调试”随手塞 localStorage，后面安全测试一定会找上门

7. 总结

关键点	Cookie	sessionStorage	localStorage
存储大小	4KB	约 5MB	约 5MB
生命周期	可持久化	仅限当前会话	永久存储
是否随请求发送	是	否	否
XSS 安全风险	高（可用 HttpOnly 保护）	高	高
CSRF 安全风险	高（自动携带）	低	低
适用场景	服务器通信、认证	短期存储	持久化存储