Cookie和LocalStorage的区别
Cookie 与 LocalStorage 在容量、生命周期、自动发送和安全边界上的差异。
#tech / dev / frontend
#type / concept
#status / growing
Cookie 和 LocalStorage 的区别
[!info] related notes
- 所属 MOC: 前端基础 MOC, javascript-in-browser-moc
- 上位主题: javascript-in-browser
- 相关概念: 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 序列化）
- 提供简单的键值对 API：
安全性
- Cookie：
- 可以设置
HttpOnly标志防止 JavaScript 访问，提高安全性 - 可以设置
Secure标志仅通过 HTTPS 传输 - 但仍易受 CSRF 攻击
- 可以设置
- LocalStorage：
- 没有类似 Cookie 的安全标志
- 易受 XSS 攻击，恶意脚本可读取全部数据
- 不适合存储敏感信息
典型应用场景
- Cookie：
- 用户身份认证（存储 Session ID 或 Token）
- 需要服务器端读取的小数据（如用户偏好）
- LocalStorage：
- 客户端大量数据存储（如用户设置、缓存数据）
- 前后端分离架构中的客户端状态管理
- 需要持久化但不需要与服务器交互的数据
最容易混淆的点
- Cookie 和 Token 不是对立关系，Token 也可以放在 Cookie 里
localStorage不会自动跟请求走，所以它不是 Session/Cookie 的直接平替- 认证设计要区分“凭证是什么”和“凭证存在哪”这两层
最短记忆方式
Cookie 会跟请求走，localStorage 只保存在前端。