前端存储三兄弟：Cookie、localStorage、sessionStorage の 爱恨情仇

    前端存储就像你家冰箱、背包和口袋的区别——有的东西要长期囤，有的临时塞，还有的得随身带。今天我们就来聊聊这三个家伙的区别和使用场景！

---

1. Cookie —— 你的“随身小纸条”

特点

• 容量小：最多存 4KB（写篇小作文就满了）。
• 每次请求自动带：就像你去食堂打饭，阿姨总能看到你饭卡上贴的备注（“不要香菜！”）。
• 可设过期时间：不设就是会话级（关浏览器就消失）。
• 支持域名限制：Domain、Path、Secure、HttpOnly（防XSS）。

使用场景

① 存用户身份凭证（如token）—— 因为每次请求都会自动带上。
② 记录用户偏好（如主题、语言）。
③ 老项目兼容（毕竟1994年就存在了，爷爷级技术🤣）。

缺点

❌ 容易被XSS攻击（如果没设HttpOnly）。
❌ 影响性能（每次请求都带，尤其是存多了的时候）。

比喻：Cookie 就像你裤兜里的小纸条，方便但容易丢，还占口袋空间。

---

2. localStorage —— 你的“永久冰箱”

特点

• 容量大：5MB~10MB（能存一堆东西）。
• 永久存储：除非手动删除或用户清缓存。
• 不自动发送：不会像Cookie那样随请求带出去。

使用场景

① 长期缓存数据（如用户主题设置、离线数据）。
② 替代Cookie存不敏感信息（比如购物车商品ID）。
③ 前端性能优化（缓存API响应减少请求）。

缺点

❌ 不能跨标签页同步（除非用storage事件监听）。
❌ 明文存储（别放密码！）。

比喻：localStorage 就像你家冰箱，东西能放很久，但得自己记得清理过期食品。

---

3. sessionStorage —— 你的“临时背包”

特点

• 容量大：和localStorage一样（5MB~10MB）。
• 会话级存储：关标签页就消失（刷新页面不会丢）。
• 不共享：不同标签页就算同域名也互不干扰。

使用场景

① 临时存表单数据（防止页面刷新丢失）。
② 单页应用（SPA）路由状态。
③ 敏感数据短期存储（比Cookie安全，关页就消失）。

缺点

❌ 不能跨标签页共享（独立背包，各背各的）。

比喻：sessionStorage 就像你去超市带的购物袋，结账前东西都在，回家（关标签页）就清空了。

---

三兄弟对比表

特性	Cookie	localStorage	sessionStorage
容量	4KB	5MB~10MB	5MB~10MB
生命周期	可设置过期时间	永久存储	关标签页就消失
是否随请求发送	✅（自动带）	❌	❌
访问权限	全域名（可设Path）	当前域名	当前标签页
典型用途	身份认证、用户偏好	长期缓存	临时存储

---

总结：怎么选？

• 要随请求带数据？ → Cookie（但别滥用）。
• 想长期存前端数据？ → localStorage（适合缓存）。
• 标签页临时存点东西？ → sessionStorage（关页就清空，安全）。

终极口诀：

“Cookie 像裤兜，localStorage 是冰箱，sessionStorage 是购物袋——按需选用！”