JavaScript本地存储主要靠Cookie和localStorage实现：Cookie随HTTP请求自动收发，容量小、可设过期时间、支持HttpOnly；localStorage纯客户端存储、容量大、永久保存、无自动传输、不支持过期机制。
JavaScript 中的本地存储主要靠 Cookie 和 localStorage 实现，但它们设计目标、使用方式和限制完全不同。简单说：Cookie 是为“通信”服务的，会随 HTTP 请求自动发送；localStorage 是为“前端数据缓存”服务的，纯客户端保存，不参与网络传输。
Cookie：带状态的 HTTP 小信封
Cookie 是服务器通过 Set-Cookie 响应头写入浏览器的小文本片段，后续同域请求时浏览器自动附在 Cookie 请求头中发回。它天生和 HTTP 协议绑定。
- 容量小：单个 Cookie 一般不超过 4KB，一个域名下总大小通常限制在 4–5KB
- 默认无有效期：关闭浏览器即失效（会话 Cookie）；可设
Expires或Max-Age变成持久 Cookie - 支持路径（
Path）、域名（Domain）、安全标记（Secure）、HttpOnly 等属性 -
document.cookie是一个字符串接口，读写都需手动解析，比如：
设置：document.cookie = "user=abc; expires=Fri, 31 Dec 2027 23:59:59 GMT; path=/;"
读取：需用字符串分割或正则提取，没有原生 get/set 方法 - 敏感信息慎存：若未设
HttpOnly，JS 可读写，有 XSS 泄露风险
localStorage：纯前端的键值数据库
localStorage 是 Web Storage API 的一部分，完全由 JavaScript 控制，数据仅存在浏览器本地，不会随任何 HTTP 请求发送。
- 容量大：通常 5–10MB（各浏览器不同），远超 Cookie
- 永久存储：除非手动清除（
localStorage.removeItem()或localStorage.clear()），否则一直存在 - 同源限制：仅当前协议+域名+端口可访问，不能跨域共享
- 只支持字符串：存对象需
JSON.stringify()，取时用JSON.parse() - 操作简单：
localStorage.setItem("key", "value")、localStorage.getItem("key")、localStorage.removeItem("key") - 不支持过期机制：如需时效性，得自己存时间戳并在读取时判断
关键区别一目了然
- 传输行为：Cookie 自动收发；localStorage 完全静默，不走网络
-
作用域控制：Cookie 可通过
Domain和Path精细控制；localStorage 只看完整同源 -
安全性侧重点：Cookie 靠
HttpOnly防 XSS 读取；localStorage 全靠前端逻辑防护，XSS 下极易被窃取 - 适用场景：登录态 token（短时效）常用 Cookie（配合 HttpOnly + Secure）；用户偏好、页面缓存、表单草稿等适合 localStorage
别忽略 sessionStorage
顺带提一下 sessionStorage：它和 localStorage 接口一致，但数据只在当前浏览器标签页生命周期内有效，关闭标签即清空。适合临时状态
，比如多步骤表单的中间数据。
