1. 本地存储与离线，IndexedDB 与 Cache API？
问题
本地存储与离线能力中，IndexedDB 与 Cache API 的定位分别是什么？二者如何协作支撑离线应用？
考察点
- IndexedDB 面向结构化数据、Cache API 面向请求/响应
- 与 localStorage 的容量与异步差异
- Service Worker 中的离线组合模式
答案
IndexedDB 是浏览器内置的事务型 NoSQL 数据库，面向结构化数据（对象、索引、游标、事务），容量大、异步、支持持久化请求（navigator.storage.persist），适合存业务数据；Cache API 面向"请求→响应"对，专为 HTTP 资源设计，与 Service Worker 深度集成，适合缓存页面资源与 API 响应。离线应用的标准组合是：Service Worker 的 fetch 拦截先用 Cache API 命中资源（App Shell 与静态资源），业务数据走 IndexedDB，必要时配 Background Sync 在联网后回传。localStorage 只适合小量同步字符串，不能承担离线存储职责。
解析
考察离线存储体系的分工：Cache API 管"网络层资源"，IndexedDB 管"业务层数据"，二者通过 Service Worker 协作构成离线能力闭环，需与 localStorage 的容量与同步语义区分。
示例代码
// Service Worker 中组合使用 Cache API 与 IndexedDB
self.addEventListener('fetch', (e) => {
e.respondWith((async () => {
const cached = await caches.match(e.request);
if (cached) return cached;
const res = await fetch(e.request);
const cache = await caches.open('app-shell');
cache.put(e.request, res.clone());
return res;
})());
});