Cookie、LocalStorage 和 SessionStorage 有什么区别？
请从存储大小、生命周期、作用域、HTTP 请求携带等维度全面对比这三种浏览器存储方式。
回答
Yahuda
| 特性 | Cookie | LocalStorage | SessionStorage |
|---|---|---|---|
| 容量 | 约 4KB | 5-10MB | 5-10MB |
| 生命周期 | 可设置过期时间；默认关闭浏览器即失效 | 持久化，除非手动清除 | 关闭标签页/窗口即清除 |
| 作用域 | 同域名下所有页面（含子路径） | 同域名+同协议跨标签共享 | 仅当前标签页（同源但不跨标签） |
| HTTP 携带 | ✅ 自动在请求头中携带（增加带宽） | ❌ 不自动携带 | ❌ 不自动携带 |
| 操作 API | document.cookie（字符串操作繁琐） | setItem/getItem/removeItem/clear | 同 LocalStorage |
| 安全 | 可设置 HttpOnly/Secure/SameSite | 可被 JS 任意访问（XSS 风险） | 同 LocalStorage |
| 同源策略 | 同源+可设置 path/domain | 严格同源（协议+域名+端口） | 严格同源+同标签页 |
选择建议：
- 需要服务端读取 → Cookie（设置 HttpOnly 防 XSS）
- 持久化客户端数据 → LocalStorage（主题/用户偏好）
- 会话级临时数据 → SessionStorage（表单暂存/页面状态）
- 敏感信息 → 优先服务端存储，或使用加密+httpOnly Cookie
注意：所有存储类型都不适合存敏感信息（密码/Token），XSS 攻击可窃取。