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。