当你关闭浏览器再重新打开，登录状态为何还在？购物车商品为何不会消失？这些"记忆"背后，藏着浏览器存储的"四大家族"——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等库使用。
四大家族技能比拼
特性 | Cookie | localStorage | sessionStorage | IndexedDB |
容量 | 4KB | 5MB | 5MB | 数百MB至GB级 |
生命周期 | 可设置过期时间 | 永久存储 | 会话级 | 永久存储 |
作用域 | 同源+路径 | 同源 | 标签页隔离 | 同源 |
API风格 | 字符串操作 | 键值对API | 键值对API | 异步数据库API |
数据类型 | 字符串 | 字符串 | 字符串 | 支持所有数据类型 |
性能 | 随请求传输 | 同步阻塞 | 同步阻塞 | 异步非阻塞 |
选型秘籍：什么场景用什么存储？
- 用户登录状态 → Cookie（带HttpOnly和Secure标记）
- 主题偏好设置 → localStorage
- 多步骤表单 → sessionStorage
- 离线应用数据 → IndexedDB
- 购物车数据 → 临时数据用sessionStorage，需要持久化则结合localStorage和服务器同步
安全警示：这些坑要避开
- 不要用localStorage存敏感信息（如token），容易被XSS攻击窃取
- Cookie要设置HttpOnly、Secure和SameSite属性防XSS和CSRF
- 避免频繁读写localStorage，会阻塞主线程
- 大量数据操作优先用IndexedDB的异步API
就像每个家庭需要不同成员分工，Web开发也需要根据数据特性选择合适的存储方案。理解这四位管家的脾气秉性，才能让你的Web应用既高效又安全。下次开发遇到存储需求，不妨回来翻翻这篇指南，相信你会做出更明智的选择！