在前端开发中，Cookie、sessionStorage 和 localStorage 是我们经常使用的存储方式。它们的区别看似简单，但如果你能理解它们的核心特性、性能影响以及安全风险，你就能在面试或实际开发中游刃有余。

1. 容量限制与数据格式

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

🔹 扩展点： 虽然 sessionStorage 和 localStorage 只能存储字符串，但我们可以使用 JSON.stringify() 存入对象，取出时用 JSON.parse() 还原。

1
2
3
4
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 在浏览器进程关闭后就会清除，实际上，它仅在关闭该标签页时清除，不同标签页之间的数据是相互隔离的。

3. 数据传输与请求影响

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

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

4. 安全性对比

存储方式 XSS 攻击风险 CSRF 攻击风险
Cookie ✅ 高（但可使用 HttpOnly 保护） ✅ 高（请求自动携带）
sessionStorage ✅ 高（可被 JavaScript 访问） ❌ 低（不会随请求发送）
localStorage ✅ 高（可被 JavaScript 访问） ❌ 低（不会随请求发送）

安全性建议：

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

5. 适用场景

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

6. 面试加分项：如何选择最佳存储方案？

面试官可能会追问：“如果需要存储用户 Token，你会选择哪种方式？”

✅ 最佳实践：

  1. 最安全方式：建议存储在 HttpOnly Cookie，这样 JS 不能访问，可有效防范 XSS。
  2. 如果要存储在前端：sessionStorage 更安全，因为它不会被长期存储，减少了被劫持的风险。
  3. 不要把 Token 存在 localStorage，除非确保严格的 XSS 预防措施。

7. 总结

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

8. 你是否踩过这些坑？

💡 一个真实案例：
有一次，我在开发一个管理后台时，为了方便，直接把用户的 JWT Token 存在了 localStorage。结果团队的安全测试发现，如果用户访问了一个带有 XSS 攻击的页面，攻击者就能轻松拿到 Token 并劫持会话。最终，我们改用了 HttpOnly Cookie 来存储 Token，彻底解决了这个隐患。

👉 你的项目中是否也有类似的安全隐患？欢迎留言讨论！