IndexedDB 是 Electron 应用本地持久化的首选方案，因其原生支持对象存储、异步事务、索引查询及数百 MB 容量，远优于仅支持字符串、同步阻塞且容量受限的 localStorage。
IndexedDB 是 Electron 应用中实现本地数据持久化的首选方案之一，它比 localStorage 更适合存储结构化、大量或需要索引查询的数据。Electron 基于 Chromium，完整支持 IndexedDB API，且不受浏览器同源策略在桌面环境下的限制，因此可稳定用于离线场景、缓存、用户配置、日志记录等。
为什么在 Electron 中优先选 IndexedDB 而非 localStorage？
localStorage 仅支持字符串键值对，每次读写都要手动序列化/反序列化，容量通常限于 5–10MB，且是同步阻塞操作；而 IndexedDB：
- 原生支持对象存储，无需手动 JSON 处理
- 支持事务、索引、游标遍历和范围查询
- 单库容量可达数百 MB（取决于系统磁盘空间）
- 异步非阻塞，不影响主进程或渲染进程响应
- 在 Electron 的 renderer 进程中可直接使用，无需通过 preload 或 IPC 中转（除非需跨窗口共享）
基础使用：打开数据库、创建对象仓库与添加数据
在 renderer 进程中（如 React/Vue 组件内）可直接调用 IndexedDB API：
示例：初始化用户设置库
立即学习“前端免费学习笔记（深入）”；
const request = indexedDB.open('MyAppDB', 2);
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('settings')) {
const store = db.createObjectStore('settings', { keyPath: 'id' });
store.createIndex('byCategory', 'category', { unique: false });
}
};
request.onsuccess = (event) => {
const db = event.target.result;
const tx = db.transaction('settings', 'readwrite');
const store = tx.objectStore('settings');
store.put({ id: 'theme', category: 'ui', value: 'dark' });
};
注意事项与 Electron 特有实践
Electron 中使用 IndexedDB 需关注以下实际问题：
- 主进程不直接支持 IndexedDB：它仅运行在 renderer 进程（或自建的 webview）。如需主进程访问，应通过 IPC 发送数据，或改用主进程友好的方案（如 sqlite3 + better-sqlite3）
- 多窗口数据同步需手动处理：不同 renderer 窗口打开同一数据库时，onversionchange 事件可用于监听版本变更，但数据变更不会自动广播，建议结合 BroadcastChannel 或自定义事件通知
-
打包后路径无影响：IndexedDB 数据按 origin 存储（Electron 默认 origin 为
file://），打包后仍可用；若用protocol.registerSchemesAsPrivileged自定义协议，需确保 origin 一致以复用数据 - 测试与调试更方便：可在 DevTools → Application → IndexedDB 中直接查看、增删数据，无需额外工具
进阶建议：提升可靠性与体验
面向生产环境，推荐补充以下实践：
- 封装轻量 DB 工具类，统一处理 open 失败、版本迁移、事务重试逻辑
- 对敏感配置启用加密（如用 crypto.subtle 在存入前加密 value 字段）
- 定期导出关键数据为 JSON 文件备份，避免数据库损坏导致丢失
- 首次启动时检查 IndexedDB 是否可用（部分杀毒软件或企业策略可能禁用），降级到 fallback 方案（如 lowdb + JSON 文件）
