cookie、session 与 localStorage
约 445 字大约 1 分钟
2026-02-24
cookie 与 session 与 localStorage
问题
cookie、session 与 localStorage的区别？
对比
| 特性 | Cookie | sessionStorage | localStorage |
|---|---|---|---|
| 生命周期 | 可设过期时间（默认会话） | 页面会话期间（关闭标签页清除） | 持久存储（除非手动清除） |
| 作用域（Domain/Path） | 可指定域名和路径，随请求自动发送到服务端 | 同源（协议+域名+端口） | 同源 |
| 存储容量 | ≈4KB | ≈5MB（各浏览器不同） | ≈5–10MB |
| 是否随 HTTP 请求发送 | ✅ 是（影响带宽） | ❌ 否 | ❌ 否 |
| API | document.cookie（字符串操作） | sessionStorage.setItem(key, val) | localStorage.setItem(key, val) |
| 是否支持跨标签共享 | ✅（同域） | ❌（仅当前标签页） | ✅（同域所有标签页） |
详细说明
1. Cookie
- 主要用于服务端与客户端状态同步（如身份认证）。
- 每次 HTTP 请求自动携带（可通过
HttpOnly、Secure、SameSite增强安全）。 - 示例：
document.cookie = "token=abc123; path=/; max-age=3600"; - ⚠️ 容量小、影响性能（随请求头传输），不适合存大量数据。
2. sessionStorage
- 数据仅在当前浏览器标签页有效，刷新保留，关闭标签页清除。
- 不同标签页即使打开同一页面，
sessionStorage也相互隔离。 - 适合临时保存单次会话的 UI 状态（如表单草稿）。
3. localStorage
- 数据持久化存储，除非用户手动清除或代码删除。
- 所有同源标签页共享同一份数据。
- 适合缓存长期配置、用户偏好、离线数据等。
注意事项
- 敏感信息（如 token）不应明文存于
localStorage/sessionStorage：
它们易受 XSS 攻击（JS 可直接读取）。
✅ 推荐：使用HttpOnly+SecureCookie 存储认证凭证。 - Cookie 需设置
SameSite=Strict/Lax防止 CSRF。
使用建议
- 与服务端交互用 Cookie；
- 临时会话用 sessionStorage；
- 长期本地缓存用 localStorage。