Web Storage 不能替代 Cookie，但前端状态管理应优先用 localStorage/sessionStorage 而非 document.cookie；存储容量达 5MB（远超 Cookie 的 4KB），无自动网络传输开销，API 更规范，但需手动处理过期与 XSS 风险。
Web Storage 不能替代 Cookie，但绝大多数前端状态管理场景下，应该优先用 localStorage 或 sessionStorage，而不是塞一堆 document.cookie。
存储大小：4KB vs 5MB，差了1000倍以上
Cookie 单个最大约 4KB（实际有效值常低于 4095 字节），且同域名下所有 Cookie 总和还受浏览器限制（Chrome 约 180 个，Firefox 约 150 个）。一旦超限，新写入的 Cookie 会被静默丢弃——你根本收不到报错。
而 Web Storage：localStorage 和 sessionStorage 在主流浏览器中普遍支持 5MB（Firefox/Opera）到 10MB（IE/Edge），Chrome 实际可用约 2.5–5MB，足够存一个带缩略图的用户设置 JSON、几屏表单草稿，甚至小型离线词典数据。
- 别试图用
document.cookie = "data=" + hugeString存对象，大概率截断且无法 debug - 存大块数据前先测容量：
try { localStorage.setItem('test', 'x'.repeat(6e6)); } catch(e) { console.warn('超出本地存储限额'); } - 移动端 WebView（如微信内置浏览器）可能更保守，建议实测
localStorage可用上限
有效期与生命周期：自动过期 vs 手动清除
Cookie 可通过 Max-Age 或 Expires 设置自动过期时间，比如 document.cookie = "token=abc; Max-Age=3600" 表示 1 小时后失效；不设则为会话级（关浏览器即丢）。
立即学习“前端免费学习笔记（深入）”；
Web Storage 没有“自动过期”机制：
-
localStorage：永久存在，除非调用localStorage.removeItem()或localStorage.clear()，或用户手动清缓存 -
sessionStorage：只在当前标签页/窗口生命周期内有效，关掉该页就清空；新开同网址标签页是全新sessionStorage，互不共享 - 想模拟“1小时过期”？得自己存时间戳：
localStorage.setItem('userPref', JSON.stringify({ data: 'dark', expires: Date.now() + 3600000 }));读取时手动判断expires
网络传输开销：每次请求都发 vs 完全不发
这是性能分水岭。Cookie 会随每个同域 HTTP 请求（包括 GET /logo.png、POST /api/user）自动附加在 Cookie: 请求头里。哪怕你只存了个 theme=dark，它也会出现在图片请求中——纯属浪费带宽。
Web Storage 数据完全不出浏览器，localStorage.getItem() 是纯内存操作，零网络成本。
- 如果你的网站日均百万请求，每个 Cookie 平均
1KB，那每天多传1TB无效数据 - 弱网环境（如地铁、电梯）下，Cookie 膨胀直接拖慢首屏加载，尤其影响 PWA 离线体验
- 敏感 token 别放
localStorage——XSS 一触发，fetch('/api')就能全偷走；真要持久化登录态，应由后端签发 HttpOnly Cookie
API 易用性与数据类型：字符串 vs 键值对封装
Cookie 的读写是字符串拼接游戏：document.cookie 是个怪异的分号分割字符串，没有原生 get/set 方法，必须自己 parse。
Web Storage 提供干净的键值对 API：
- 存：
localStorage.setItem('cart', JSON.stringify([{id:1,qty:2}])) - 取：
const cart = JSON.parse(localStorage.getItem('cart') || '[]') - 删：
sessionStorage.removeItem('formStep2') - 注意：
setItem只接受字符串值，对象必须JSON.stringify；getItem返回null而非undefined，判空别漏|| 'default'
真正容易被忽略的是：Web Storage 的变更会触发同域所有页面的 storage 事件，但仅限其他标签页——当前页改了不会自触发。想监听自己改的数据？得靠业务层手动 dispatch。
