如何使用electron-store存储本地数据并在渲染进程中实现数据存取

前置准备 #

首先安装electron-store依赖：

npm install electron-store

Electron高版本默认关闭渲染进程Node集成，推荐通过「主进程初始化store + preload脚本暴露API」的方案实现跨进程操作，避免安全风险。

1. 主进程初始化并注册IPC监听 #

在主进程入口文件（如main.js）中初始化store，同时注册读写操作的IPC处理逻辑：

const { app, BrowserWindow, ipcMain } = require('electron')
const Store = require('electron-store')

// 初始化store，可传入配置项
const store = new Store({
  // 可选：配置默认值
  defaults: {
    userConfig: {
      theme: 'light',
      notificationEnable: true
    },
    appCount: 0
  }
})

// 注册读取数据的IPC处理
ipcMain.handle('electron-store:get', (_, key) => {
  return store.get(key)
})

// 注册写入数据的IPC处理
ipcMain.handle('electron-store:set', (_, key, value) => {
  return store.set(key, value)
})

2. Preload脚本暴露API给渲染进程 #

在preload.js中通过上下文桥将读写方法暴露给渲染进程：

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronStore', {
  get: (key) => ipcRenderer.invoke('electron-store:get', key),
  set: (key, value) => ipcRenderer.invoke('electron-store:set', key, value)
})

3. 渲染进程读取存储数据 #

渲染进程中直接调用暴露的API即可读取数据，因为是异步IPC调用，需要用async/await处理：

// 示例：读取主题配置
async function getThemeConfig() {
  const theme = await window.electronStore.get('userConfig.theme')
  console.log('当前主题：', theme)
  return theme
}

electron-store的set方法本身同时支持新增和修改逻辑：指定的键不存在时会自动新增，键已存在时会覆盖原有值完成修改。

1. 单键值操作 #

// 示例1：新增/修改一级键值
await window.electronStore.set('appVersion', '1.2.0')

// 示例2：新增/修改嵌套属性，支持点语法访问深层属性
await window.electronStore.set('userConfig.username', 'radiorz')

2. 批量操作 #

如果需要同时修改多个键值对，可以传入对象作为参数：

// 主进程IPC逻辑补充：支持批量写入
ipcMain.handle('electron-store:set-many', (_, dataObj) => {
  return store.set(dataObj)
})

// Preload补充暴露方法
contextBridge.exposeInMainWorld('electronStore', {
  // ...其他方法
  setMany: (dataObj) => ipcRenderer.invoke('electron-store:set-many', dataObj)
})

// 渲染进程批量写入
await window.electronStore.setMany({
  'userConfig.age': 25,
  'userConfig.location': 'Beijing',
  firstLaunch: false
})

注意事项 #

• 仅支持存储可序列化的JSON类型数据，函数、Symbol、循环引用对象等不可序列化内容无法正常存储
• 如果需要删除指定键，可以调用store.delete(key)方法，按照上述相同逻辑封装IPC接口即可使用
• 存储文件默认保存在系统应用数据目录下，可通过store.path属性查看存储文件的具体路径

内容的提问来源于stack exchange，提问作者radiorz