fetch 本身不提供离线存储能力，需结合 cache api（service worker 中推荐用于 pwa）、localstorage（主页面轻量 json 缓存）或 indexeddb（结构化大数据存储）实现；须注意缓存策略、时效性、安全性及降级处理。
Fetch 本身不提供离线存储能力，但可以结合 Cache API（Service Worker 环境）或 localStorage / IndexedDB（主页面环境）来实现接口数据的离线缓存与恢复。
用 Cache API 缓存 Fetch 请求（推荐用于 PWA 场景）
Cache API 是浏览器原生支持的、专为离线资源设计的缓存机制，需在 Service Worker 中使用。它能缓存完整的 Request/Response 对象，包括状态码、headers 和 body。
- 注册并激活 Service Worker，在 install 阶段预缓存关键接口或资源
- 在 fetch 事件中拦截网络请求，优先从 cache 中匹配；未命中再发起真实 fetch，并将响应存入 cache
- 注意：Cache 存储的是 Response 对象，读取时需用
.json()或.text()解析，且同一个 URL 的多次响应会覆盖旧缓存（除非手动管理 key）
用 localStorage 简单缓存 JSON 数据（适合轻量、非敏感数据）
适用于主页面脚本中对 GET 接口结果做简单持久化，比如用户配置、列表页数据等。注意 localStorage 只能存字符串，且有大小限制（通常 5–10MB）。
- 发送 fetch 前先查 localStorage，若存在且未过期（可加时间戳字段判断），直接返回解析后的数据
- fetch 成功后，把 response.json() 结果序列化为字符串，连同时间戳一起存入 localStorage
- 示例键名建议包含 URL + 参数哈希（如
"api/users?limit=20"→"cache_users_20"），避免冲突
用 IndexedDB 存储结构化、大量或需查询的数据
当接口返回数据量大、需要按字段检索、或需长期保留时，IndexedDB 更合适。它支持事务、索引和二进制数据，比 localStorage 更健壮。
- 创建数据库、对象仓库（Object Store），定义主键（如接口 URL 或 id 字段）
- fetch 后将数据写入 IndexedDB；离线时通过 get() 或 index 查询获取缓存数据
- 可配合版本升级机制处理数据结构变更，也支持存储 ArrayBuffer、Blob 等类型（如图片 base64）
注意事项与实用建议
离线存储不是“一劳永逸”，需兼顾时效性、一致性与用户体验。
- 设置合理缓存策略：例如对用户资料用强缓存（localStorage + 长期有效），对新闻列表用短时效（加 timestamp 判断是否超 5 分钟）
- 网络恢复后主动刷新：监听
online事件，触发重新 fetch 并更新本地缓存 - 错误降级处理：fetch 失败时，不要抛错中断流程，而是 fallback 到缓存数据，并提示“内容可能不是最新”
- 敏感数据避免明文缓存：token、密码相关字段不应存入 localStorage；涉及隐私的数据建议不缓存或加密后存储
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
