B43. 本地存储

3.1. 本地存储 localStorage 的常见 API 使用

想保存用户的主题偏好，即使关闭浏览器也不丢失？localStorage 就像网页的"记忆芯片"，可以永久保存数据！

3.1.1. 核心方法

// 存储数据（只能存字符串！）
localStorage.setItem("username", "张三");
localStorage.setItem("settings", JSON.stringify({ theme: "dark" }));

// 读取数据
const username = localStorage.getItem("username");
const settings = JSON.parse(localStorage.getItem("settings"));

// 删除数据
localStorage.removeItem("username");

// 清空所有数据
localStorage.clear();

易错点

• 存储对象必须用 JSON.stringify() 转换！直接存对象会变成 [object Object]
• 读取时要配合 JSON.parse()，否则会得到字符串
• 忘记处理 getItem 返回的 null 会导致运行时错误（如 JSON.parse(null)）

3.1.2. 异常处理技巧

try {
  const data = JSON.parse(localStorage.getItem("importantData"));
  if (!data) {
    // 处理数据不存在的情况
  }
} catch (e) {
  console.error("解析本地存储失败", e);
  localStorage.removeItem("importantData"); // 清除损坏数据
}

进阶技巧 使用默认值简化代码：

const theme = JSON.parse(localStorage.getItem("theme")) || "light";

3.2. 本地存储 localStorage 的工作机制

为什么不同网站的 localStorage 不冲突？就像每个教室都有自己的储物柜，localStorage 通过"同源策略"保证数据隔离！

3.2.1. 核心特性

特性	说明
持久化存储	除非手动清除，否则永久保存
同源限制	协议+域名+端口必须完全一致（如 https://example.com 和 http://example.com 是不同源）
容量限制	通常5MB左右（不同浏览器有差异）
同步操作	数据更新会立即写入磁盘，可能影响性能

3.2.2. 与 sessionStorage 的区别

// sessionStorage 数据在关闭标签页后清除
sessionStorage.setItem("tempData", "临时数据");

对比表

特性	localStorage	sessionStorage
生命周期	永久有效	关闭标签页/浏览器即失效
共享范围	同源页面间共享	同一标签页内共享
典型用途	用户偏好、登录状态	临时表单数据、会话缓存

易错点

• 隐私模式下 localStorage 可能不可用！记得处理异常
• 存储过多数据可能导致浏览器报错（QUOTA_EXCEEDED_ERR）

3.3. 本地存储的高级用法

想实现跨标签页数据同步？localStorage 的 storage 事件就像网页的"消息广播系统"！

3.3.1. 监听存储变化

// 在页面A修改数据
localStorage.setItem("sharedKey", "新值");

// 在页面B监听变化
window.addEventListener("storage", (e) => {
  if (e.key === "sharedKey") {
    console.log("检测到共享数据更新:", e.newValue);
  }
});

事件对象属性

• key：被修改的键名
• oldValue：旧值
• newValue：新值
• url：触发修改的页面URL

3.3.2. 数据版本控制

const VERSION = "v1.0";
const STORAGE_KEY = "appData";

// 写入时
localStorage.setItem("version", VERSION);
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));

// 读取时
const storedVersion = localStorage.getItem("version");
if (storedVersion !== VERSION) {
  // 数据格式不匹配，执行迁移逻辑
  localStorage.removeItem(STORAGE_KEY);
}

知识回顾

• localStorage 存储的是字符串，对象需用 JSON.stringify() 转换
• 通过 storage 事件可实现跨标签页通信
• 注意同源策略限制和5MB容量上限
• sessionStorage 适合临时数据，关闭标签页自动清除
• 需处理隐私模式异常和存储空间不足错误

课后练习

基础题

1. （选择）以下哪个方法能正确存储对象？ A. localStorage.setItem("obj", {a:1}) B. localStorage.setItem("obj", JSON.stringify({a:1})) ✅ C. localStorage.setObject("obj", {a:1})

2. （填空）读取并解析存储的用户数据：

   const user = ______(localStorage.getItem("user"));

   → 答案：JSON.parse

3. （纠错）找出代码错误：

   localStorage.setItem("theme", "dark");
   const theme = JSON.parse(localStorage.getItem("theme")); // 错误！字符串不需要解析

项目题

实现主题记忆功能

要求：

1. 用户选择浅色/深色主题时，保存到 localStorage
2. 页面加载时自动应用上次选择的主题
3. 提供"重置为默认"按钮，清除主题设置
4. （拓展）支持自动检测系统主题并存储偏好

<!-- 示例结构 -->
<label>
  <input type="radio" name="theme" value="light"> 浅色
</label>
<label>
  <input type="radio" name="theme" value="dark"> 深色
</label>
<button id="reset">重置</button>