当你关闭浏览器再重新打开，登录状态为何还在？购物车商品为何不会消失？这些"记忆"背后，藏着浏览器存储的"四大家族"——Cookie、localStorage、sessionStorage和IndexedDB。它们各有所长，今天我们就来聊聊这四位管家如何分工，帮你在开发时精准选型。

一、Cookie：4KB的"老派信使"

Cookie诞生于1994年，堪称互联网存储界的活化石。这位老管家虽然容量只有4KB，却肩负着客户端与服务器通信的重任。每次HTTP请求，它都会自动携带在请求头中，像个忠心的信使往返于浏览器与服务器之间。

// 设置Cookie，7天后过期
document.cookie = "userId=123; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/; Secure; SameSite=Strict";

拿手好戏：用户认证、购物车临时数据、跨页面状态保持。但这位老管家有个坏习惯——喜欢"多管闲事"，无论服务器是否需要，每次请求都要跟着跑腿，容易造成性能损耗。

二、localStorage：5MB的"长期储物柜"

如果说Cookie是流动的信使，那localStorage就是固定的储物柜。这位管家能存5MB数据，而且是永久存储，除非用户手动清理或代码删除。它像个细心的管家，会把用户偏好、主题设置等重要但不敏感的信息妥善保管。

// 存储用户主题偏好
localStorage.setItem('theme', 'dark');
// 读取数据
const theme = localStorage.getItem('theme');
// 删除数据
localStorage.removeItem('theme');

注意事项：这位管家虽然忠诚，但记性不太好——只能存储字符串。如果要存对象，得先用JSON.stringify()序列化，读取时再用JSON.parse()解析。而且它同步的工作方式，处理大量数据时可能会让页面"卡顿"。

三、sessionStorage：5MB的"一次性购物袋"

sessionStorage和localStorage是双胞胎，但性格迥异。它像个一次性购物袋，只在当前标签页的会话期间有效，关闭标签就会自动清空。适合存放表单临时数据、单页应用状态等"用完即弃"的信息。

独门秘籍：多标签页数据隔离。在A标签页存的数据，B标签页完全看不到，有效防止数据混乱。这对多账户同时登录的场景特别有用。

四、IndexedDB：GB级的"智能仓库"

当需要存储大量结构化数据时，前面三位管家就显得力不从心了。这时就需要IndexedDB这位"智能仓库管理员"登场。它支持异步操作、事务处理、索引查询，容量可达硬盘空间的50%，轻松应对GB级数据存储。

// 打开数据库
const request = indexedDB.open('myDatabase', 1);
// 创建对象仓库
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  db.createObjectStore('products', {keyPath: 'id'});
};

适用场景：离线应用数据缓存、大型Web应用本地数据库、多媒体文件存储。不过这位管家脾气有点古怪——API比较复杂，建议搭配Dexie.js等库使用。

四大家族技能比拼

选型秘籍：什么场景用什么存储？

1. 用户登录状态 → Cookie（带HttpOnly和Secure标记）
2. 主题偏好设置 → localStorage
3. 多步骤表单 → sessionStorage
4. 离线应用数据 → IndexedDB
5. 购物车数据 → 临时数据用sessionStorage，需要持久化则结合localStorage和服务器同步

安全警示：这些坑要避开

• 不要用localStorage存敏感信息（如token），容易被XSS攻击窃取
• Cookie要设置HttpOnly、Secure和SameSite属性防XSS和CSRF
• 避免频繁读写localStorage，会阻塞主线程
• 大量数据操作优先用IndexedDB的异步API

就像每个家庭需要不同成员分工，Web开发也需要根据数据特性选择合适的存储方案。理解这四位管家的脾气秉性，才能让你的Web应用既高效又安全。下次开发遇到存储需求，不妨回来翻翻这篇指南，相信你会做出更明智的选择！