JavaScript本地存储分Cookie、localStorage、sessionStorage：Cookie用于服务端共享小数据并支持安全策略；localStorage持久保存前端字符串数据；sessionStorage仅限当前标签页临时存储。
JavaScript 操作浏览器本地存储主要靠 Cookie、localStorage 和 sessionStorage 三种机制。它们用途不同、容量不同、生命周期也不同，选对才能避免踩坑。
Cookie：适合传给服务器的小数据
Cookie 是最早期的本地存储方式，特点是每次 HTTP 请求都会自动携带（除非设为 HttpOnly），所以它本质是“客户端与服务端共享的状态”。
- 大小限制严格：单个 Cookie 通常 ≤4KB，一个域名下总 Cookie 数量和大小都有浏览器限制
- 需要手动操作：没有原生 API，得自己封装
document.cookie的读写逻辑（注意分号和等号格式） - 支持过期时间、作用域（
path/domain）、安全标记（Secure/HttpOnly/SameSite） - 典型用途：用户登录态（如 session ID）、CSRF token、A/B 实验分组标识
localStorage：持久保存前端状态
localStorage 是纯前端的键值对存储，数据永久保留在浏览器中（除非手动清除或用户主动删除），且不随请求发送到服务器。
- 容量大：一般 5–10MB（各浏览器不同），远超 Cookie
- 操作简单：
localStorage.setItem('key', 'value')、localStorage.getItem('key')、removeItem、clear - 只支持字符串：存对象要先
JSON.stringify()，取出来要JSON.parse() - 同源限制严格：协议 + 域名 + 端口完全一致才可访问
- 典型用途：用户偏好设置（主题、语言）、表单草稿、离线缓存的静态资源元信息
sessionStorage：页面会话级临时存储
行为和 localStorage 几乎一样，但生命周期仅限当前标签页（或窗口）——关闭标签即清空，新开标签也不共享。
立即学习“Java免费学习笔记（深入）”；
- 适合临时中转数据：比如从列表页跳转详情页时传参，避免 URL 暴露敏感内容
- 多标签隔离：每个标签页有独立的 sessionStorage，互不影响
- 刷新页面不丢失，关掉再开就没了
Cookie 还是 localStorage？关键看这三点
不用死记硬背，按实际需求判断：
- 要不要发给后端？ 要 → 用 Cookie；不要 → 优先 localStorage 或 sessionStorage
-
数据是否敏感？ 是登录凭证、token 等 → Cookie 配合
HttpOnly + Secure + SameSite=Strict更安全；纯前端状态（如折叠菜单）→ localStorage 更合适 - 要存多久？ 长期有效（如记住用户名）→ localStorage；本次会话即可 → sessionStorage；需服务端控制过期 → Cookie
基本上就这些。不复杂但容易忽略细节，比如忘记 JSON 序列化、混淆同源规则、或者把敏感 token 明文塞进 localStorage —— 后者其实已被不少 XSS 攻击利用过。
