LocalStorage 不推荐作为 PWA 主要离线数据方案，仅适合存储轻量、结构简单、无需查询的静态配置或小规模字典（如主题偏好、语言选择、几百条纯文本词条），因其仅支持字符串值、容量有限（约5MB）、无索引能力。
LocalStorage 可以在 PWA 中存储静态配置或离线字典数据，但**不推荐作为主要离线数据方案**——它适合轻量、结构简单、无需索引或查询的场景，比如主题偏好、语言选择、小规模词表（几百条以内纯文本词条）。
适合存什么类型的静态配置或字典
LocalStorage 本质是字符串键值对，只支持字符串值。所以真正能直接存的只有：
- JSON 序列化后的简单对象（如
{"theme":"dark","lang":"zh"}） - 扁平化字典数组（如
[{"id":"a1","word":"apple"},{"id":"b2","word":"banana"}]），需用JSON.stringify()存，JSON.parse()取 - 单个字段的缓存（如
"lastUpdateTime": "2026-08-20T10:30:00"）
不适合存：带二进制内容的资源、超大词典（>500KB）、需要模糊搜索/分页/条件过滤的数据——这些应交给 IndexedDB。
怎么安全地存和取字典数据
存之前必须做类型检查和异常捕获，因为 localStorage 容量有限（通常 5MB），且 setItem 遇到非字符串值会静默转为空字符串，JSON 序列化失败会抛错。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 存字典示例：
const dict = [{id: 'hello', zh: '你好', en: 'hello'}];<br>try {<br> localStorage.setItem('offlineDict', JSON.stringify(dict));<br>} catch (e) {<br> if (e.name === 'QuotaExceededError') console.warn('本地存储已满');<br>} - 取字典并容错：
const raw = localStorage.getItem('offlineDict');<br>const dict = raw ? JSON.parse(raw) : [];<br>// 建议加校验，避免解析失败导致白屏<br>if (!Array.isArray(dict)) console.error('字典格式错误');
和 PWA 离线机制的配合要点
LocalStorage 是主线程同步 API，不能在 Service Worker 中使用。因此它和 PWA 的离线能力是“并行关系”，不是“嵌套关系”：
- Cache API 负责离线加载 HTML/CSS/JS/图片等静态资源（骨架页面）
- localStorage 负责保存用户侧轻量状态或预置数据（如默认词典、界面设置）
- 两者互不依赖：即使 Cache API 缓存了页面，若 localStorage 数据损坏，字典仍无法显示；反之亦然
- 首次安装 PWA 时，可在 install 事件后、页面加载完成时，用 fetch 预加载字典 JSON 并写入 localStorage，实现“安装即可用”
更稳妥的替代建议
如果字典数据超过 100KB 或未来要支持搜索、更新、版本管理，优先考虑：
- IndexedDB：异步、容量大（数百 MB）、支持索引与事务，PWA 中标准离线数据库
-
Cache API + 静态 JSON 文件：把字典做成
/data/dict.json，在 Service Worker 中预缓存，fetch 时直接读缓存（无需解析存 localStorage） - 混合方案：用 Cache API 缓存原始 JSON，首次运行时解析一次并存入 localStorage 供快速读取，再监听更新触发重载
