91. 模块十一回顾与测验

核心知识点回顾

1. 三种存储方案对比

特性	localStorage	sessionStorage	IndexedDB
生命周期	永久	标签页关闭即清除	永久
容量	~5MB	~5MB	几百MB+
数据类型	字符串	字符串	任意类型（对象、Blob 等）
API 复杂度	简单	简单	较复杂
同步/异步	同步	同步	异步
同源共享	是（同域名）	否（标签页隔离）	是
支持索引查询	否	否	是

2. 废弃技术

• AppCache：用 manifest 文件声明离线资源，设计缺陷多，已废弃
• Web SQL：用 SQL 操作浏览器数据库，2010 年停止推进，被 IndexedDB 取代

3. 现代方案

• Service Worker + Cache API：当前做离线应用的正确方式
• IndexedDB：当前做大量结构化数据存储的首选

4. 常用 API

// localStorage
localStorage.setItem("key", "value");
localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();

// sessionStorage（API 完全相同）
sessionStorage.setItem("key", "value");
sessionStorage.getItem("key");

// IndexedDB 核心流程
const request = indexedDB.open("dbname", 1);
request.onupgradeneeded = function (e) {
  const db = e.target.result;
  const store = db.createObjectStore("storeName", { keyPath: "id" });
};
request.onsuccess = function (e) {
  const db = e.target.result;
  db.transaction(["storeName"], "readwrite").objectStore("storeName").add(data);
};

测验题

题 1

以下哪个操作在 sessionStorage 中执行后，数据会在浏览器关闭后仍然保留？

A. sessionStorage.setItem("name", "张三") B. localStorage.setItem("name", "张三") C. 以上都可以 D. 以上都不可以

答案：B

sessionStorage 在标签页关闭时数据就被清除，只有 localStorage 能持久保存。

题 2

想在浏览器里存一个用户对象 { name: "张三", age: 25 }，应该怎么做？

A. 直接 localStorage.setItem("user", { name: "张三", age: 25 }) B. localStorage.setItem("user", JSON.stringify({ name: "张三", age: 25 })) C. localStorage.addObject("user", { name: "张三", age: 25 }) D. localStorage.user = { name: "张三", age: 25 }

答案：B

localStorage 只存字符串，对象要先 JSON.stringify 序列化。

题 3

关于 storage 事件，以下说法正确的是：

A. 当前页面修改 localStorage 会触发自己的 storage 事件 B. 只有其他同源标签页修改 localStorage 才会触发当前页面的 storage 事件 C. 同一标签页内修改也会触发 D. sessionStorage 的修改也会触发其他页面的 storage 事件

答案：B

storage 事件只在其他同源标签页修改存储时触发，当前页面自己的修改不会触发。

题 4

以下哪种场景最适合使用 IndexedDB？

A. 存一个用户的主题偏好（“dark” 或 “light”） B. 存一个会话期间的临时表单数据 C. 存 1000 篇文章的数据，需要按作者和日期查询 D. 存一个简单的访问计数器

答案：C

需要存储大量结构化数据并支持复杂查询时，IndexedDB 最合适。A 和 D 用 localStorage 就够了，B 适合用 sessionStorage。

题 5

关于 AppCache 和 Web SQL，以下说法正确的是：

A. 它们是现代 HTML5 推荐使用的存储技术 B. 它们都还在被浏览器积极支持 C. 它们都已被废弃，分别由 Service Worker 和 IndexedDB 取代 D. AppCache 还在用，Web SQL 废弃了

答案：C

两者都已废弃。AppCache 被 Service Worker + Cache API 取代，Web SQL 被 IndexedDB 取代。

小结

选对存储方案是关键：

• 小配置 → localStorage
• 临时数据 → sessionStorage
• 大量数据 + 查询 → IndexedDB
• 离线整个网站 → Service Worker

老旧技术不用学，知道它们被什么取代了就行。

---

下一章开始，我们进入模块十二：Web API 与通信，涵盖拖放、地理定位、Web Workers、WebSocket 等实用 API。