在开发Electron应用时，我们经常需要对一些数据进行本地化存储，比如用户的配置、应用的状态、缓存的数据等。本文将介绍一款简单而强大的数据持久化组件：electron-store。

electron-store是一个基于Node.js文件系统的数据存储库，它可以将数据以JSON文件的形式保存在本地，并提供了一些方便的API来读写数据。

The data is saved in a JSON file named config.json in app.getPath('userData').

但其实我并没有找到这个config.json（（但能用就是了

electron-store的优点有：

简单易用，无需安装数据库或其他依赖
支持多进程访问，可以在主进程和渲染进程中使用
支持点符号访问嵌套属性，例如store.get('foo.bar')
支持默认值，自动合并用户设置和默认设置
支持加密，可以使用密码对数据进行加密和解密
支持类型检查，可以使用TypeScript或JSDoc来定义数据类型
支持观察者模式，可以监听数据变化并执行回调函数

引入插件

cnpm install electron-store

*Requires Electron 30 or later.*（since v9.0.0 on 2024/05/01）

记得检查一下Electron版本！

使用

这里使用IPC通信来进行数据的获取和存储。

可以看：【Electron】无边框窗口实现 & 自定义最小化、关闭 | Rean’s Blog (rean-schwarze.github.io)

修改 background.ts

在主进程中使用ipcMain定义ipcRenderer监听事件：

import Store from 'electron-store'

const store = new Store();

app.whenReady().then(()=>{
	// 此处省略
	
    // 获取设置
    ipcMain.handle('get-settings', (event, key) => {
        return store.get(key);
    });

    // 存储设置
    ipcMain.handle('set-settings', (event, key, value) => {
        store.set(key, value);
    });
})

修改 preload.ts

contextBridge.exposeInMainWorld('myApi', {
    // 此处省略
    // 设置相关api
    getSettings: (key) => ipcRenderer.invoke('get-settings', key),
    setSettings: (key, value) => ipcRenderer.invoke('set-settings', key, value)
})

获取数据

const getSettings=async ()=>{
  uploadExceedNum.value = await window.myApi.getSettings('upload-exceed')
  autoPlay.value = await window.myApi.getSettings('auto-play')
}

存储数据

const handleExceedNumChange=async ()=>{
  await window.myApi.setSettings('upload-exceed',uploadExceedNum.value)
}

参考链接

Electron食用指南: 数据持久化组件Electron-Store - 掘金 (juejin.cn)

sindresorhus/electron-store: Simple data persistence for your Electron app or module - Save and load user preferences, app state, cache, etc (github.com)