HTML5中IndexedDB在Electron桌面应用中的数据持久化-H5教程-PHP中文网

indexeddb 是 electron 应用本地持久化的首选方案，因其原生支持对象存储、异步事务、索引查询及数百 mb 容量，远优于仅支持字符串、同步阻塞且容量受限的 localstorage。

html5中indexeddb在electron桌面应用中的数据持久化

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 中直接查看、增删数据，无需额外工具