前言

Electron是一个基于Node.js和Chromium的跨平台桌面应用开发框架，它可以让我们使用web技术来创建原生的桌面应用。在开发Electron应用时，我们经常需要对一些数据进行本地化存储，比如用户的配置、应用的状态、缓存的数据等。本文将介绍一款简单而强大的数据持久化组件：electron-store。

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

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

接入方式

要使用electron-store，首先需要安装它：

npm install electron-store  

然后，在主线程代码中引入它，并创建一个store实例：

const Store = require('electron-store');  
const store = new Store();  

接下来，就可以使用store.set()和store.get()方法来存储和获取数据了：

// 存储一个字符串  
store.set('name', 'Allen');  
  
// 获取一个字符串  
console.log(store.get('name')); //=> 'Allen'  
  
// 存储一个对象  
store.set('user', {  
id: 1,  
username: 'Allen',  
email: 'allen@example.com'  
});  
  
// 获取一个对象  
console.log(store.get('user')); //=> {id: 1, username: 'Allen', email: 'allen@example.com'}  
  
// 使用点符号访问嵌套属性  
store.set('user.profile.avatar', 'https://example.com/avatar.png');  
console.log(store.get('user.profile.avatar')); //=> 'https://example.com/avatar.png'  
  
// 删除一个属性  
store.delete('name');  
console.log(store.get('name')); //=> undefined  
  
// 判断一个属性是否存在  
console.log(store.has('name')); //=> false  
  
// 获取所有的数据  
console.log(store.store); //=> {user: {...}}  
  
// 清空所有的数据  
store.clear();  
console.log(store.store); //=> {}  

使用场景

electron-store可以用于很多Electron应用的数据存储场景，例如：

• 保存用户的偏好设置，如主题、语言、字体等
• 保存应用的运行状态，如窗口大小、位置、最近打开的文件等
• 保存缓存的数据，如网络请求的结果、图片、视频等
• 保存敏感的数据，如用户的密码、token、私钥等

下面我们以一个简单的示例来演示如何使用electron-store来实现这些功能。

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

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

const store = new Store();

// 定义ipcRenderer监听事件
ipcMain.on('setStore', (_, key, value) => {
  store.set(key, value)
})

ipcMain.on('getStore', (_, key) => {
  let value = store.get(key)
  _.returnValue = value || ""
})

在渲染进程中与主线程进行通信并暴露接口给页面：

// preload.js
import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
const electronHandler = {
  ipcRenderer: {
    setStoreValue: (key: string, value: any) => {
      ipcRenderer.send("setStore", key, value)
    },

    getStoreValue(key: string) {
      const resp = ipcRenderer.sendSync("getStore", key)
      return resp
    },
  }
}

contextBridge.exposeInMainWorld('electron', electronHandler);

在页面中进行数据的存储/读取

window.electron.ipcRenderer.setStoreValue('token', '123456');
window.electron.ipcRenderer.getStoreValue('token'); // => 123456

总结

electron-store还提供了一些其他的方法和选项，具体可以参考官方文档

总之，electron-store是一个非常适合Electron应用的数据本地化存储方案，它可以满足大多数简单的数据存储需求，而且使用起来非常方便。如果你正在开发Electron应用，不妨试试electron-store吧！