WebStorage与Service Worker协同实现离线增强：前者存用户状态（如草稿、偏好），后者缓存静态资源与API响应；离线数据暂存WebStorage并标记待同步，网络恢复后由Service Worker通知主页面批量提交。
WebStorage（localStorage/sessionStorage）和Service Worker可以协同工作，实现更可靠的离线增强体验，但需注意二者定位不同：WebStorage负责客户端数据持久化存储，Service Worker负责网络请求拦截与缓存策略。它们不直接集成，但可互补使用。
用WebStorage保存用户关键状态
在用户操作中（如表单草稿、主题偏好、未提交的评论），优先写入 localStorage，确保即使页面崩溃或关闭后仍可恢复。Service Worker无法访问 WebStorage，所以这类数据必须由主页面 JavaScript 主动管理。
- 提交前自动保存草稿：
localStorage.setItem('draft', editor.value) - 监听 beforeunload 事件做兜底保存
- 页面加载时检查并还原：
const draft = localStorage.getItem('draft')
用Service Worker缓存静态资源与API响应
Service Worker 通过 cache.put() 或 Cache.addAll() 缓存 HTML/CSS/JS、图标及常用 API 接口返回（如配置信息、分类列表）。当网络不可用时，从 CacheStorage 返回已缓存内容，保障基础功能可用。
- 推荐使用 Stale-While-Revalidate 策略：优先返回缓存，后台更新
- 对 POST 请求或含敏感参数的接口，避免缓存，改用 WebStorage 记录待同步队列
- 缓存版本需手动升级：修改 cacheName 或调用
skipWaiting()触发更新
离线场景下的数据同步协调
用户在离线时产生的数据（如新增笔记、点赞）应暂存于 WebStorage，并标记为“待同步”。Service Worker 可监听 fetch 事件，在检测到网络恢复后触发同步逻辑（例如通过 postMessage 通知主页面执行上传）。
立即学习“前端免费学习笔记（深入）”；
- 设计简单队列结构：
{ id: 'uuid', type: 'like', payload: { postId: 123 }, timestamp: Date.now() } - 主页面监听 Service Worker 的 message 事件，收到 “network-online” 后批量提交
- 同步成功后从 localStorage 中移除对应条目，并更新 UI
注意兼容性与清理边界
localStorage 在 Safari 隐私模式下可能抛出 QuotaExceededError；CacheStorage 在部分 Android WebView 中存在清除异常。上线前需做降级处理。
- 封装 storage 工具函数，捕获异常后 fallback 到内存对象
- 定期清理过期的 localStorage 数据（如 7 天前的草稿）
- Service Worker 更新后，旧缓存不会自动删除，需在 activate 事件中主动 clean
