Cookie 和 LocalStorage 的区别

[!info] related notes

• 所属 MOC: 前端基础 MOC, 浏览器 JS MOC
• 上位主题: 浏览器中的 JavaScript
• 相关概念: browser-client-storage, cookie-session-token, xss-cross-site-scripting
• 安全: CSRF 跨站请求伪造, same-site

这两个概念都和浏览器本地保存数据有关，但它们的职责差异很大。

一句话定义

Cookie 更像“可被浏览器自动随请求携带的小型状态载体”，localStorage 更像“纯前端本地持久化键值存储”。

存储容量

• Cookie：存储容量较小，通常限制在 4KB 左右。每个域名下一般最多只能存储约 20 个 Cookie。
• LocalStorage：存储容量大得多，现代浏览器通常提供 5MB 左右的存储空间。

生命周期

• Cookie：
  • 可以设置过期时间（通过 expires 或 max-age 属性）
  • 如果没有设置过期时间，则是会话级别的，浏览器关闭后自动删除
• LocalStorage：
  • 永久存储，除非用户手动清除或通过 JavaScript 删除
  • 数据不受页面刷新、浏览器关闭或系统重启影响

数据传输

• Cookie：
  • 每次 HTTP 请求都会自动携带同源的 Cookie
  • 这会增加网络流量，可能影响性能
• LocalStorage：
  • 数据仅存储在客户端，不会自动发送到服务器
  • 需要手动通过 JavaScript 读取和设置

作用域

• Cookie：
  • 可以通过 domain 和 path 属性设置作用域
  • 默认情况下，同源的所有页面共享 Cookie
• LocalStorage：
  • 受同源策略限制，只能被同源页面访问
  • 同源的不同标签页和窗口间共享数据

API 和使用方式

• Cookie：
  • 操作相对复杂，需要通过 document.cookie 字符串操作
  • 需要手动解析键值对
• LocalStorage：
  • 提供简单的键值对 API：setItem()、getItem()、removeItem() 等
  • 操作更方便，支持直接存储对象（需 JSON 序列化）

安全性

• Cookie：
  • 可以设置 HttpOnly 标志防止 JavaScript 访问，提高安全性
  • 可以设置 Secure 标志仅通过 HTTPS 传输
  • 但仍易受 CSRF 攻击
• LocalStorage：
  • 没有类似 Cookie 的安全标志
  • 易受 XSS 攻击，恶意脚本可读取全部数据
  • 不适合存储敏感信息

典型应用场景

• Cookie：
  • 用户身份认证（存储 Session ID 或 Token）
  • 需要服务器端读取的小数据（如用户偏好）
• LocalStorage：
  • 客户端大量数据存储（如用户设置、缓存数据）
  • 前后端分离架构中的客户端状态管理
  • 需要持久化但不需要与服务器交互的数据

最容易混淆的点

• Cookie 和 Token 不是对立关系，Token 也可以放在 Cookie 里
• localStorage 不会自动跟请求走，所以它不是 Session/Cookie 的直接平替
• 认证设计要区分“凭证是什么”和“凭证存在哪”这两层

最短记忆方式

Cookie 会跟请求走，localStorage 只保存在前端。

学习检查

不看正文回答：

1. Cookie 与 localStorage 最根本的职责差异是什么？
2. 为什么“Token 放 Cookie”与“使用 Token 而不是 Cookie”不是同一层问题？
3. 哪一种存储会被浏览器按规则自动带到 HTTP 请求中？
4. 为什么把长期敏感凭证放进 localStorage 会放大 XSS 风险？
5. 给一个真实 Web 场景，说明你为什么选择 Cookie 或 localStorage。

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC