浏览器的存储方案中，Cookie 主要用于在客户端与服务器之间传递少量数据（详见 17.1 节），而 Web Storage 则专为浏览器本地存储设计，提供了更大容量、更简单的 API，且数据不会自动随请求发送到服务器。Web Storage 包含两个完全独立的对象：localStorage 和 sessionStorage，二者 API 完全相同，区别仅在于生命周期和作用域。
17.2.1 API 基本用法
Web Storage 以键值对形式存储字符串数据，API 极简，直接挂载在全局 window 对象上：
// 存入数据
localStorage.setItem('username', '张三');
// 也可以直接使用属性形式（但不推荐，可能与内置方法冲突）
localStorage.age = '28';
// 读取数据
const user = localStorage.getItem('username'); // '张三'
const age = localStorage.age; // '28'
// 获取键名
console.log(localStorage.key(0)); // 第一个键名
// 删除单项
localStorage.removeItem('username');
// 清空所有
localStorage.clear();
// sessionStorage 的用法完全一致
sessionStorage.setItem('temp', '临时数据');需要特别注意的是，存储的值只能是字符串。如果需存储对象或数组，必须用 JSON.stringify() 序列化，读取时用 JSON.parse() 还原：
const user = { name: '李四', role: 'admin' };
localStorage.setItem('user', JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem('user'));
console.log(saved.name); // '李四'17.2.2 生命周期与作用域
这是 localStorage 与 sessionStorage 最大的区别所在：
- localStorage：数据持久化存储，除非主动通过代码删除或用户清除浏览器数据，否则永不过期。同一浏览器的相同协议、主机名和端口的所有页面均可共享同一份 localStorage。即使关闭浏览器再重新打开，数据依然存在。
- sessionStorage：数据仅在当前会话期间有效。一旦关闭标签页或窗口，该标签页对应的 sessionStorage 即被清空。不同标签页之间（即使是同一网站）数据完全隔离，但同一标签页内的多个 iframe 可以共享（同源）。刷新页面数据依然保留，但“关闭标签页”被视为会话结束。
一个实用的记忆方法：localStorage 跨窗口、跨重启持久存在；sessionStorage 与单个标签页生死与共。
17.2.3 存储容量与限制
与 Cookie（约 4KB）相比，Web Storage 的容量要大得多，但具体限制因浏览器而异：
| 特性 | localStorage | sessionStorage | Cookie |
|------|--------------|----------------|--------|
| 容量 | 约 5MB | 约 5MB | 约 4KB |
| 生命周期 | 永久（除非手动删除） | 标签页关闭即清除 | 可设过期时间 |
| 作用域 | 同源共享 | 同源且同标签页 | 同源且按路径 |
| 与服务器通信 | 不自动发送 | 不自动发送 | 每次请求自动附带 |
| API 易用性 | 简单 | 简单 | 需手动解析文档 |
虽然规范未强制 5MB 上限，但主流浏览器普遍按此实现。当存储接近满时，继续写入会抛出 QuotaExceededError 异常，因此在设置重要数据时建议加上 try...catch：
try {
localStorage.setItem('key', 'value');
} catch (e) {
if (e.name === 'QuotaExceededError') {
console.warn('存储空间已满，请清理旧数据');
}
}17.2.4 实际应用场景
localStorage 的典型运用：
- 用户偏好与主题：记住用户的暗色/亮色模式、语言选择、布局配置。
- 登录态保持：存储 token 或用户标识（但须注意 XSS 风险，切勿存储敏感信息）。
- 表单草稿：避免意外刷新后丢失已填写内容。
- 前端路由历史或状态缓存：减少重复请求，加快页面渲染。
sessionStorage 的典型运用：
- 表格筛选条件暂存：同一页面内多次操作时保持筛选状态，关闭标签页后自动丢弃。
- 多步骤表单的中间数据：例如分步注册，切换到下一步时存储上一步数据，避免提交时数据混乱。
- 页面间临时传参：通过
window.open打开的新窗口无法直接共享变量，sessionStorage 在严格同源同标签页对话中可充当临时的跨页面数据桥（注：跨标签页不行，仅限当前标签页或同源 iframe）。
17.2.5 安全与注意事项
- 永远不要存储敏感数据：Web Storage 中的数据可以通过浏览器开发者工具直接查看，且无法抵御 XSS 攻击。一旦攻击者能注入脚本，即可读取所有 localStorage/sessionStorage 内容。涉及 JWT token 等凭据信息时，推荐使用 HttpOnly Cookie 或 BFF 层间接处理。
- 同步阻塞特性：Web Storage 的所有 API 都是同步的，在读取或写入大量数据时可能会阻塞主线程，造成页面卡顿。对于较大数据量（超过 100KB）操作，建议分批处理，或改用异步的 IndexedDB（17.3 节）。
- 隐私模式差异：Safari 的隐私模式下，localStorage 仍可使用，但某些浏览器的无痕模式可能会限制存储或清空数据，不应假设其 100% 可用。
- 跨域限制：与 Cookie 类似，Web Storage 严格遵循同源策略，不同子域名、不同协议、不同端口的数据完全隔离，无法直接共享（可通过 postMessage 跨域通信间接传递数据）。
Web Storage 优雅地填补了 Cookie 容量小、自动附加开销大的短板，是浏览器端持久化存储的首选方案之一。当需要存储更复杂的结构化数据或更大文件时，IndexedDB（见 17.3 节）提供了更强大的数据库能力。