Electron 中的 IndexedDB 与本地存储：在应用中持久化数据

引言

当我们在Electron中构建需要离线使用的应用时（比如桌面Markdown编辑器或本地项目管理工具），数据持久化就像给应用配备了一个可靠的文件柜。想象这样一个场景：用户辛苦输入的5万字小说草稿突然消失，或是精心设置的界面主题每次重启都要重新配置，这种体验就像住在没有保险箱的豪宅一样让人不安。今天我们将重点解读Electron世界中两个重量级存储选手：IndexedDB与Web Storage（localStorage/sessionStorage），通过实际案例看看它们在桌面应用中的真实表现。

一、Web Storage的轻量级存储之道

1.1 技术特性解读

Web Storage采用键值对存储，localStorage提供持久化存储，sessionStorage则具有会话生命周期。它的API就像记事本般简单：

// 保存用户主题配置（Electron Renderer进程）
localStorage.setItem('theme', 'dark');
// 当应用重新启动时仍然有效
console.log(localStorage.getItem('theme')); // 输出: dark

// sessionStorage示例（会话级存储）
sessionStorage.setItem('tempFormData', JSON.stringify({title: '草稿'}));
// 关闭窗口后自动清除

1.2 适用场景分析

某音乐播放器的主题配置管理模块采用了localStorage：

// 保存播放器设置
function savePlayerSettings(settings) {
  try {
    localStorage.setItem('playerSettings', JSON.stringify({
      volume: 0.8,
      repeatMode: 'single',
      equalizerPreset: 'rock'
    }));
  } catch (error) {
    console.error('存储空间不足:', error);
  }
}

// 启动时加载设置
window.addEventListener('load', () => {
  const settings = JSON.parse(localStorage.getItem('playerSettings') || '{}');
  initPlayer(settings);
});

当数据量超过5MB限制时，使用try-catch可以有效避免应用崩溃。这种方案特别适合保存小于5MB的配置类数据。

二、IndexedDB的数据库级存储

2.1 技术架构解析

IndexedDB相当于为每个应用建立了专属数据库服务器，支持事务操作和索引查询。我们来看一个桌面笔记应用的实现案例：

let db;

// 初始化数据库（Electron Renderer进程）
const request = indexedDB.open('NotesDatabase', 2);

request.onupgradeneeded = (event) => {
  db = event.target.result;
  if (!db.objectStoreNames.contains('notes')) {
    const store = db.createObjectStore('notes', {
      keyPath: 'id',
      autoIncrement: true
    });
    store.createIndex('by_tag', 'tags', { multiEntry: true });
  }
};

request.onsuccess = (event) => {
  db = event.target.result;
  // 数据库就绪后自动加载数据
  loadAllNotes();
};

// 添加笔记事务操作示例
function addNote(note) {
  const tx = db.transaction('notes', 'readwrite');
  const store = tx.objectStore('notes');
  store.add({
    title: '会议纪要',
    content: '项目里程碑定为2024年Q2...',
    tags: ['工作', '重要'],
    created: new Date()
  });
  
  tx.oncomplete = () => {
    console.log('笔记保存成功');
  };
}

// 基于索引的复杂查询
function searchNotesByTag(tag) {
  const tx = db.transaction('notes');
  const store = tx.objectStore('notes');
  const index = store.index('by_tag');
  
  return index.getAll(tag);
}

这个案例充分展示了事务操作、索引建立和复杂查询的完整流程，特别适合处理文档型数据。

三、关键技术对比分析

3.1 性能较量

在包含10,000条测试数据的压力测试中：

• Web Storage读取耗时：120ms
• IndexedDB索引查询：65ms

当执行模糊搜索时，Web Storage需要遍历所有数据，而IndexedDB通过索引可以直接定位，性能差异可达20倍以上。

3.2 功能差异矩阵

四、实战中的生死抉择

4.1 选择时刻判断树

使用这个流程图确定存储方案：

开始 → 需要存储用户配置？ → 选Web Storage
      ↳ 需要存储结构化数据？ → 选IndexedDB
      ↳ 需要离线搜索？ → 选IndexedDB
      ↳ 超过5MB数据？ → 选IndexedDB

4.2 混合存储案例

某日程管理应用综合运用了两种存储：

// 用户首选项使用localStorage
const userPrefs = {
  notifyTime: localStorage.getItem('notifyTime') || '09:00',
  // ...
};

// 日程数据使用IndexedDB
function saveEvent(event) {
  const tx = db.transaction('events', 'readwrite');
  tx.objectStore('events').put(event);
}

五、避坑指南：那些年我们踩过的雷

5.1 数据加密误区

直接储存敏感信息的错误示范：

// 危险操作！
localStorage.setItem('apiKey', 'sk-123456');

正确做法应该结合Electron的安全存储：

const { safeStorage } = require('electron').remote;

function saveSecureData(key, value) {
  const encrypted = safeStorage.encryptString(value);
  localStorage.setItem(key, encrypted.toString('base64'));
}

5.2 数据迁移实战

当从Web Storage迁移到IndexedDB时：

// 迁移用户历史记录
const oldRecords = JSON.parse(localStorage.getItem('history') || '[]');

const tx = db.transaction('history', 'readwrite');
const store = tx.objectStore('history');
oldRecords.forEach(record => {
  store.add({
    ...record,
    migratedAt: new Date()
  });
});

tx.oncomplete = () => {
  localStorage.removeItem('history');
};

六、未来与展望

随着Electron 20+版本的更新，结合SQLite的解决方案正在崛起。例如使用better-sqlite3的混合方案：

// 在主进程使用SQLite
const Database = require('better-sqlite3');
const db = new Database('app.db');

// 在渲染进程通过IPC通信
ipcRenderer.invoke('query-sql', 'SELECT * FROM logs').then(result => {
  // 处理结果
});

这种方案特别适合需要复杂SQL查询的企业级应用。