indexeddb 是浏览器内置支持事务的 nosql 数据库，适用于离线存储结构化数据；需合理设计 schema、分块写入防阻塞、promise 封装异步操作，并做好错误降级处理。
IndexedDB 是浏览器内置的、支持事务的 NoSQL 数据库，适合存储结构化数据（如大型 JSON 配置文件），尤其适用于需要离线访问、启动时快速加载的场景。关键在于合理设计数据库结构、分块写入避免阻塞、以及用 Promise 封装异步操作提升可维护性。
创建数据库并定义 objectStore
首次打开数据库时需在 upgradeneeded 事件中创建 objectStore。建议为配置文件单独建一个 store（如 configs），主键设为配置名（如 "app-settings"），便于精确读取：
function openDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open('ConfigDB', 1);
request.onerror = () => reject(request.error);
request.onsuccess = () => resolve(request.result);
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('configs')) {
// keyPath 设为 'id'，允许使用自定义主键
db.createObjectStore('configs', { keyPath: 'id' });
}
};
});
}
分块写入大型 JSON，避免主线程卡顿
直接存几 MB 的 JSON 字符串虽可行，但序列化/反序列化和写入过程会阻塞渲染。更稳妥的做法是：先将大配置对象拆分为逻辑模块（如 ui、api、features），再逐个存入；或使用 structuredClone（现代浏览器）确保深拷贝安全：
- 对超大配置（如 >2MB），考虑压缩后存为
Uint8Array（需配合TextEncoder+pako等库） - 写入时使用事务的
store.put()，并监听transaction.oncomplete保证写入完成 - 避免在单个事务中写入过多记录——每 50~100 条提交一次新事务，防止事务超时
启动时异步加载并缓存解析结果
页面初始化时，用 get() 检索指定配置项，成功后立即解析（而非存字符串）。建议搭配内存缓存（如 Map）避免重复解析：
async function loadConfig(id = 'app-settings') {
const db = await openDB();
return new Promise((resolve, reject) => {
const transaction = db.transaction(['configs'], 'readonly');
const store = transaction.objectStore('configs');
const request = store.get(id);
request.onsuccess = () => {
const data = request.result?.data;
if (data) {
try {
// 假设 data 是已 JSON.stringify 过的字符串
resolve(JSON.parse(data));
} catch (e) {
reject(new Error('Invalid JSON in IndexedDB'));
}
} else {
reject(new Error(`Config "${id}" not found`));
}
};
request.onerror = () => reject(request.error);
});
}
// 使用示例
let cachedConfig;
async function getOrLoadConfig() {
if (cachedConfig) return cachedConfig;
cachedConfig = await loadConfig();
return cachedConfig;
}
错误处理与降级策略
IndexedDB 可能因用户禁用、存储配额超限或版本冲突而失败。务必提供 fallback：
- 捕获
AbortError、QuotaExceededError等常见错误，并记录到监控系统 - 降级方案：若 IndexedDB 不可用，退回到
localStorage（仅限小配置）或动态 fetch 远程 JSON（配合 Service Worker 缓存） - 首次加载失败时，可预埋一份精简默认配置（硬编码在 JS 中），保障基础功能可用
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
