Cookie、localStorage、sessionStorage 的区别？
对比
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 大小 | ~4KB | ~5MB | ~5MB |
| 生命周期 | 可设置过期时间 | 永久 | 关闭标签页清除 |
| 请求携带 | ✅ 自动携带 | ❌ | ❌ |
| 作用域 | 域名+路径 | 域名 | 标签页 |
| API | document.cookie | getItem/setItem | getItem/setItem |
| 安全 | HttpOnly/Secure | 无 | 无 |
| 适用 | 认证 Token | 持久化数据 | 临时会话数据 |
Cookie
// 设置 Cookie
document.cookie = 'name=Tom; max-age=3600; path=/; Secure; SameSite=Strict'
// 读取（返回所有 cookie 字符串）
console.log(document.cookie) // 'name=Tom; age=25'
// 服务器设置
Set-Cookie: token=abc; HttpOnly; Secure; SameSite=Strict; Max-Age=3600Cookie 属性：
HttpOnly：JS 不可读取（防 XSS）Secure：仅 HTTPS 传输SameSite=Strict|Lax|None：跨站发送策略Max-Age/Expires：过期时间Domain/Path：作用范围
localStorage
// 存储
localStorage.setItem('user', JSON.stringify({ name: 'Tom' }))
// 读取
const user = JSON.parse(localStorage.getItem('user'))
// 删除
localStorage.removeItem('user')
// 清空所有
localStorage.clear()
// 监听变化（跨标签页通信）
window.addEventListener('storage', (e) => {
console.log(e.key, e.newValue)
})sessionStorage
// API 与 localStorage 完全相同
sessionStorage.setItem('temp', 'data')
sessionStorage.getItem('temp')
// 生命周期：标签页关闭后清除
// 同源不同标签页的 sessionStorage 独立使用场景
Cookie：
- 认证 Token（HttpOnly）
- 用户偏好设置（需要服务器读取的）
localStorage：
- 用户设置（主题、语言）
- 缓存数据
- 离线数据
sessionStorage：
- 表单临时数据
- 单次会话状态
- 页面间传递临时数据
Token 存储方案
| 方案 | XSS 风险 | CSRF 风险 | 推荐 |
|---|---|---|---|
| Cookie (HttpOnly) | 低 | 中 | ✅ 需配合 SameSite |
| localStorage | 高 | 无 | ❌ JS 可读取 |
| 内存变量 | 无 | 无 | ✅ 刷新丢失 |
最佳实践
- 认证 Token 存 HttpOnly Cookie
- 用户偏好存 localStorage
- 临时数据存 sessionStorage
- 敏感数据不要存前端