JavaScript 浏览器 API：localStorage 与 sessionStorage
浏览器提供了两种简单易用的客户端存储机制：localStorage 和 sessionStorage。它们都允许你在用户的浏览器中保存键值对数据，无需服务器参与，也不依赖 Cookie。两者语法几乎一致，但生命周期和作用范围不同。下面手把手教你如何使用它们。
区分 localStorage 与 sessionStorage
核心区别在于数据的持久性：
localStorage：数据永久保存，除非用户手动清除（如通过浏览器设置删除），否则关闭浏览器、重启电脑都不会丢失。sessionStorage：数据仅在当前浏览器标签页（或窗口）的会话期间有效。一旦关闭该标签页，数据立即清除；即使刷新页面，只要不关标签，数据仍保留。
两者都遵循同源策略（same-origin policy），即只有相同协议、域名和端口的网页才能访问彼此存储的数据。
基本操作四步走
无论是 localStorage 还是 sessionStorage，都支持以下四个基本方法：
-
存储数据：使用
.setItem(key, value)
注意：value必须是字符串。如果传入对象或数字，会被自动转为字符串。 -
读取数据：使用
.getItem(key)
返回对应key的字符串值；若不存在，返回null。 -
删除单条数据：使用
.removeItem(key) -
清空所有数据：使用
.clear()
下面以 localStorage 为例演示完整操作流程（sessionStorage 用法完全相同，只需将 localStorage 替换为 sessionStorage）。
实操步骤：存储用户偏好设置
假设你想让用户选择主题颜色，并在下次访问时自动应用。
-
打开浏览器开发者工具：按下
F12或Ctrl + Shift + I（Windows/Linux） /Cmd + Option + I（Mac），切换到“Console”面板。 -
存储用户选择的主题：
执行以下代码：localStorage.setItem('theme', 'dark'); -
读取并应用主题：
执行：const userTheme = localStorage.getItem('theme'); console.log(userTheme); // 输出 "dark"在实际网页中，你可以用这个值动态设置
<body>的 class，例如：document.body.className = userTheme; -
修改主题后更新存储：
如果用户切换到浅色模式，执行：localStorage.setItem('theme', 'light'); -
清除主题设置：
若用户选择“恢复默认”，执行：localStorage.removeItem('theme'); -
彻底清空所有本地存储（谨慎使用）：
执行：localStorage.clear();
存储非字符串数据（如对象、数组）
由于 localStorage 和 sessionStorage 只能存字符串，必须先序列化再存储。
-
存储对象：
使用JSON.stringify()转换对象为字符串：const userPrefs = { theme: 'dark', fontSize: 16, notifications: true }; localStorage.setItem('userPreferences', JSON.stringify(userPrefs)); -
读取对象：
使用JSON.parse()将字符串还原为对象：const savedPrefs = JSON.parse(localStorage.getItem('userPreferences')); console.log(savedPrefs.theme); // 输出 "dark" -
处理读取失败的情况：
如果存储的值不是合法 JSON（如被意外篡改），JSON.parse()会抛出错误。建议加 try-catch 保护：let prefs; try { prefs = JSON.parse(localStorage.getItem('userPreferences') || '{}'); } catch (e) { prefs = {}; // 回退到默认空对象 }
注意事项与限制
虽然这两个 API 简单好用，但有几点必须牢记：
- 存储容量有限：大多数浏览器限制每个源（origin）约 5–10 MB。超过会抛出
QuotaExceededError错误。 - 仅支持字符串：务必手动处理类型转换。
- 同步阻塞：所有操作都是同步的，大量读写可能轻微影响页面性能（通常可忽略）。
- 不安全：数据保存在用户设备上，任何 JavaScript 都能读取，切勿存储密码、令牌等敏感信息。
- 隐私模式影响：在浏览器无痕/隐私模式下，
localStorage可能被禁用或临时隔离。
下表总结关键差异：
| 特性 | localStorage |
sessionStorage |
|---|---|---|
| 数据持久性 | 永久（除非手动清除） | 仅当前会话（关闭标签页即消失） |
| 同源标签页共享 | 是（同一域名下所有标签页可互访） | 否（每个标签页独立存储） |
| 刷新页面后是否保留 | 是 | 是 |
| 关闭浏览器后是否保留 | 是 | 否 |
典型使用场景
使用 localStorage 当你需要：
- 记住用户登录状态（配合 token，但 token 本身不应明文存储）
- 缓存用户界面设置（如语言、布局、音量）
- 离线保存草稿内容（如未发布的博客）
使用 sessionStorage 当你需要：
- 临时保存表单数据（防止用户意外刷新丢失输入）
- 多步骤向导中的中间状态（如注册流程）
- 单次会话内的防重复提交标记
检测浏览器是否支持
虽然现代浏览器普遍支持，但为保险起见，可先检测是否存在：
if (typeof Storage !== 'undefined') {
// 支持 localStorage/sessionStorage
localStorage.setItem('test', 'ok');
} else {
// 不支持，需降级处理（如使用 Cookie 或提示用户升级浏览器）
}手动管理存储空间
你可以在浏览器设置中查看或清除这些数据：
- 打开网站设置：在地址栏左侧点击锁形图标 → 点击 “网站设置”。
- 查找存储选项：向下滚动找到“权限”下的“Cookie 及其他网站数据”。
- 清除数据：点击 “清除数据” 或 “移除” 按钮。
或者直接在开发者工具中操作：
- 打开开发者工具（
F12） - 切换到 “Application”（应用）面板
- 在左侧边栏展开 “Local Storage” 或 “Session Storage”
- 右键点击 对应域名 → 选择 “Clear” 清除全部，或双击某一行直接编辑/删除
localStorage.setItem('guide', 'complete');
暂无评论，快来抢沙发吧！