HTML5WebStorage和Cookie有什么区别_存储大小有效期对比【详解】_技术教程

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'