在浏览器中，本地存储（localStorage）、会话存储（sessionStorage）和 Cookie 都是用于在客户端保存数据的方式，但它们在生命周期、作用域、存储大小、安全性、HTTP 传输等方面有显著区别。
一、三者核心区别对比表
| 特性 | localStorage | sessionStorage | Cookie |
|---|---|---|---|
| 生命周期 | 永久存储，除非手动清除 | 仅在当前会话期间有效（关闭标签页即清除） | 可设置过期时间（Expires 或 Max-Age） |
| 作用域（域名/路径） | 同源（协议 + 域名 + 端口） | 同源 | 可指定路径、域名、安全标志 |
| 存储大小 | ~5–10 MB（各浏览器略有差异） | ~5–10 MB | ~4 KB（单个 cookie） |
| 是否随 HTTP 请求自动发送 | ❌ 否 | ❌ 否 | ✅ 是（除非 HttpOnly） |
| 是否可被 JavaScript 访问 | ✅ 是 | ✅ 是 | ✅ 是（除非 HttpOnly） |
| 安全性 | 低（易被 XSS 攻击） | 低（同上） | 中高（HttpOnly、Secure、SameSite 可增强） |
| 跨标签页共享 | ✅ 是（同一源） | ❌ 否（仅当前标签页） | ✅ 是（如果域名和路径相同） |
二、使用场景详解
localStorage：适合长期持久化数据
- 适用场景：
- 用户偏好设置（如主题颜色、语言、字体大小等）；
- 登录状态记忆（如'记住我'功能）；
- 缓存静态资源或用户本地数据（如离线笔记、购物车草稿）；
- 单页应用（SPA）中跨页面共享状态。
- 注意：
- 不适合存储敏感信息（如密码、Token），除非配合加密；
- 大量数据可能导致性能下降或存储溢出。
sessionStorage：适合临时会话级数据
- 适用场景：
- 表单填写过程中的临时数据保存（如用户填写了一半的注册表单，刷新后还能保留）；
- 临时状态管理（如'当前正在编辑哪个页面'）；
- 防止重复提交（在提交前设置一个标志位，提交成功后清除）；
- 注意：
- 关闭标签页后数据自动丢失，不能跨标签页共享；
- 适合'本次会话'内使用的数据，不建议用于长期保存。
Cookie：适合与服务器通信，管理会话或身份验证
- 适用场景：
- 用户登录态管理（如 JSESSIONID、Auth-Token）；
- 跟踪用户行为（如广告追踪、分析工具 GA）；
- 保持用户的会话状态（如购物车信息，由服务端维护）；
- 防止 CSRF 攻击（配合 SameSite 和 Secure 标志）；
