在多语言应用中，用 IndexedDB 缓存翻译映射表可提升加载速度与离线能力；需按语言建 store 或用复合 key 设计结构，预加载时先查缓存再回退请求，配合版本迁移、降级策略及 DevTools 调试。
在多语言应用中，用 IndexedDB 缓存动态翻译映射表（如 JSON 格式的 locale 文件）是提升加载速度、离线可用性和减少重复请求的有效方式。关键在于合理设计数据库结构、做好版本迁移，并处理好语言切换时的缓存读写逻辑。
创建带语言标识的 object store
不要把所有语言数据塞进同一个 store，而是按语言代码（如 zh-CN、en-US）做区分或作为 key 的一部分。推荐使用复合 key 或前缀命名：
- 建库时定义 version 1，创建名为 translations 的 object store，主键设为
id（如"zh-CN:home.title"），值为翻译文本 - 或用 language + key 组合作为结构化 key：store 使用
keyPath: ['language', 'key']，插入时传入{ language: 'zh-CN', key: 'button.submit', value: '提交' } - 这样支持按语言批量查询（用 IDBKeyRange.bound），也方便清空某语言全部缓存
预加载与按需更新翻译表
首次加载或语言切换时，先查 IndexedDB，命中则直接渲染；未命中再请求远程 JSON，成功后写入缓存：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 用
get()或getAll()查指定语言的所有条目，组装成 Map 或嵌套对象供 i18n 库（如 i18next）消费 - 写入时用
put()批量添加，注意事务需设为"readwrite"；大文件建议分块写入，避免阻塞 UI - 给每份翻译数据加 version 字段（如服务端返回的 etag 或 timestamp），写入前比对，避免覆盖新数据
处理版本升级与旧缓存清理
当翻译内容更新、字段结构调整或语言新增时，必须升级 DB version 并迁移数据：
立即学习“Java免费学习笔记（深入）”；
- 监听
onupgradeneeded，检查 oldVersion，比如从 v1 升到 v2 时重建 store，或 rename store 后复制旧数据 - 若旧语言数据格式不兼容（如从扁平 key 改为嵌套结构），可在 upgrade 中遍历旧 store，转换后再写入新 store
- 语言切换时，可主动调用
clear()清掉旧语言数据，再载入新语言，避免混用
错误降级与调试建议
IndexedDB 不是 100% 可靠（如用户禁用、存储满、私密模式），要有 fallback：
- 封装 getTranslations() 方法，Promise reject 时回退到内存缓存或默认语言硬编码
- 开发时用 Chrome DevTools > Application > IndexedDB 查看实际数据，确认 key 和 value 是否符合预期
- 避免在主线程大量读写——复杂操作放 Web Worker，或用 async/await + requestIdleCallback 控制节奏
