JavaScript本地存储应按需选用cookie或localStorage：cookie用于身份认证等需服务端交互的小数据，支持HttpOnly防XSS；localStorage适合前端大容量状态存储，但易受XSS攻击。
JavaScript 中的本地存储主要靠 cookie 和 localStorage 实现，但它们的设计目标、容量、生命周期和使用方式差异明显。选错方案容易导致数据丢失、安全风险或功能异常。
cookie：带服务端通信的小型文本存储
cookie 是最早期的客户端存储机制，本质是键值对字符串，随每次 HTTP 请求自动发送到服务器（除非标记为 HttpOnly）。它主要用于身份认证（如 session ID）、用户偏好同步等需要前后端协同的场景。
- 单个 cookie 最大 4KB，一个域名下总数量和大小受浏览器限制（通常 50–100 个）
- 可设置过期时间（
Expires或Max-Age），不设则为会话级（关闭浏览器即失效） - 支持
Secure（仅 HTTPS 传输）、HttpOnly（JS 无法读取，防 XSS）、SameSite（防 CSRF）等安全属性 - 操作需手动拼接字符串，原生 API 不友好：
document.cookie = "user=jack; expires=Thu, 01 Jan 2030 00:00:00 GMT; path=/; Secure"
localStorage：纯前端的大容量持久化存储
localStorage 是 HTML5 提供的 Web Storage API 之一，数据仅保存在浏览器本地，不会随请求发往服务器，适合存用户界面状态、缓存非敏感数据等。
- 容量大（通常 5–10MB/域名），远超 cookie
- 数据永久保存，除非手动调用
removeItem()或clear()，或用户清除浏览数据 - 仅限同源访问（协议 + 域名 + 端口完全一致）
- API 简洁：
localStorage.setItem("theme", "dark")
const theme = localStorage.getItem("theme")
localStorage.removeItem("theme") - 只支持字符串，存对象需先
JSON.stringify()，取时再JSON.parse()
关键区别速查表
传输行为：cookie 自动参与 HTTP 通信；localStorage 完全不发送给服务器。
容量与用途：cookie 小而精，用于身份凭证；localStorage 大而稳，用于前端状态管理。
生命周期控制：cookie 可精确控制过期；localStorage 无内置过期机制（需代码自行实现时间戳判断）。
安全性侧重：cookie 有 HttpOnly 防 XSS，但易受 CSRF 影响；localStorage 不受 CSRF 影响，但 JS 可读写，XSS 攻击下更危险。
实际开发建议
- 登录态 token：优先用
HttpOnly + Securecookie 存 session ID；若必须前端读（如 JWT），且信任前端环境，可用 localStorage，但务必防范 XSS - 用户设置（主题、语言）：用 localStorage，避免增加请求体积
- 临时缓存（列表页数据）：localStorage 或 sessionStorage（关闭标签页即清空）更合适
- 不要用 localStorage 存密码、支付信息等敏感内容
- 注意 localStorage 在 iOS Safari 的无痕模式下可能抛出 QuotaExceededError（实际容量为 0）
