15、Electron专题：使用 electron-store 进行本地数据存储

系列文章目录

大前端技术学习总纲
 1、环境与项目初始化（Electron）
2、主进程与渲染进程（Electron）
3、预加载与安全模型（Electron）
4、窗口与生命周期（Electron）
5、IPC 通信（Electron）
6、菜单、快捷键、托盘（Electron）
7、文件系统相关api以及基础的文件操作
 8、文件系统使用场景（Electron）
9、打包与发布（electron-builder）
10、代码签名详解（Electron）
12、electron专题（electron-builder）
13、Electron 专题（entitlements 配置）
14、Electron 专题（macOS 代码签名）

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

系列文章目录
前言
[一、安装 electron-store](#一、安装 electron-store)
二、基本使用方法
- [1、创建 Store 实例](#1、创建 Store 实例)
- 2、存储和读取数据
- 3、在渲染进程中使用
三、高级功能
四、同localStorage对比
五、什么时候必须使用electron-store？
六、最佳实践
总结

前言

electron-store 是一个专门为 Electron 应用设计的简单数据持久化库。它允许开发者轻松地在本地存储和读取数据，而无需设置数据库或其他复杂的存储解决方案。数据以 JSON 格式保存在用户的文件系统中，确保数据持久化并可在应用重启后恢复。

electron-store 的主要优势包括：

简单易用的 API
支持跨平台（Windows、macOS、Linux）
自动处理数据序列化和反序列化
支持嵌套属性访问（点符号）
支持默认值
可在主进程和渲染进程中使用

一、安装 electron-store

在你的 Electron 项目中安装 electron-store：

bash 复制代码

npm install electron-store

或者使用 yarn：

bash 复制代码

yarn add electron-store

二、基本使用方法

1、创建 Store 实例

在主进程中创建 Store 实例：

javascript 复制代码

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

你也可以在创建实例时设置选项：

javascript 复制代码

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

const store = new Store({
  name: 'my-app-settings',  // 存储文件名
  cwd: 'my-app',            // 存储目录
  defaults: {               // 默认值
    username: 'default-user',
    theme: 'light',
    notifications: true
  }
});

2、存储和读取数据

存储和读取数据非常简单，你可以使用 set() 方法来设置数据，使用 get() 方法来读取数据。例如：

javascript 复制代码

// 存储数据
store.set('username', 'john-doe');
store.set('theme', 'dark');
store.set('notifications', false);

// 存储嵌套数据
store.set('user.email', 'john@example.com');
store.set('user.preferences.language', 'zh-CN');

// 读取数据
const username = store.get('username');
const theme = store.get('theme', 'light'); // 提供默认值
const email = store.get('user.email');

// 检查是否存在某个键
if (store.has('username')) {
  console.log('Username exists');
}

// 删除数据
store.delete('username');

// 重置为默认值
store.reset('theme');

3、在渲染进程中使用

要在渲染进程中使用 electron-store，你需要通过 preload.js 暴露相关方法：

preload.js:

javascript 复制代码

const { contextBridge } = require('electron');
const Store = require('electron-store');

const store = new Store();

contextBridge.exposeInMainWorld('store', {
  get: (key) => store.get(key),
  set: (key, val) => store.set(key, val),
  delete: (key) => store.delete(key),
  has: (key) => store.has(key)
});

在 preload.js 中，我们创建了一个名为 store 的对象，并使用 contextBridge.exposeInMainWorld 方法将其暴露给渲染进程。然后，在渲染进程（renderer process）中，你可以通过 store 对象来调用 electron-store 的方法。

renderer.js:

javascript 复制代码

window.store.set('user.name', '张三');
const name = window.store.get('user.name');

三、高级功能

1、数据验证和默认值

你可以为存储的数据设置默认值和验证规则：

javascript 复制代码

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

const schema = {
  username: {
    type: 'string',
    default: 'anonymous'
  },
  age: {
    type: 'number',
    minimum: 0,
    maximum: 120
  },
  theme: {
    type: 'string',
    enum: ['light', 'dark'],
    default: 'light'
  }
};

const store = new Store({ schema });

2、监听数据变化

electron-store 支持监听数据变化：

javascript 复制代码

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

// 监听特定键的变化
store.onDidChange('username', (newValue, oldValue) => {
  console.log(`Username changed from ${oldValue} to ${newValue}`);
});

// 监听所有数据变化
store.onDidAnyChange((newValue, oldValue) => {
  console.log('Store updated:', newValue, oldValue);
});

3、数据加密

对于敏感数据，你可以启用加密功能：

javascript 复制代码

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

const store = new Store({
  encryptionKey: 'my-secret-key'
});

// 敏感数据会被自动加密存储
store.set('api-token', 'secret-token-value');

四、同localStorage对比

Electron-store 与 localStorage 的主要区别在于：

1、技术基础和存储位置

Electron-store 是基于 Node.js 的，而 localStorage 是基于浏览器的。
Electron-store 默认存储在系统应用数据目录（如 ~/.config/YourApp/config.json）
localStorage 数据存储在 Chromium 的用户数据目录中（如 Local Storage/leveldb）

2、进程访问限制

localStorage: 仅限渲染进程（BrowserWindow 或 WebView）访问，不能在主进程中直接使用
electron-store: 可在主进程和渲染进程中使用（需通过 IPC 通信），提供全局共享的数据存储

3、数据持久性和可靠性

localStorage: 存储在浏览器环境中，某些情况下可能会因为应用更新、覆盖安装或特定操作系统行为导致数据丢失
electron-store: 数据存储在独立的 JSON 文件中，更加稳定可靠，不受浏览器环境影响

4、数据类型支持

localStorage: 只能存储字符串类型的数据，需要手动进行序列化和反序列化才能存储对象
electron-store: 支持任何 JSON 支持的类型，自动处理序列化和反序列化

5、API功能

localStorage: 提供基本的 getItem、setItem、removeItem 方法
electron-store: 提供更丰富的 API，支持嵌套属性访问、默认值设置、数据变更监听等功能

五、什么时候必须使用electron-store？

需要在主进程中访问数据。

当你需要在 Electron 的主进程中访问存储的数据时，必须使用 electron-store，因为 localStorage 只能在渲染进程中使用。
需要更高的数据持久性保证

在某些操作系统或部署环境下，localStorage 可能会在应用更新或重启后丢失数据，而 electron-store 将数据存储在专用的 JSON 文件中，更加可靠。
存储复杂数据结构

当需要存储嵌套对象或非字符串数据时，electron-store 更加方便，因为它自动处理序列化过程。
需要数据变更监听

如果你的应用需要在数据发生变化时做出反应，electron-store 提供了便捷的事件监听机制：
处理敏感数据

electron-store 支持数据加密，适合存储敏感信息：

六、最佳实践

合理组织数据结构：使用嵌套对象来组织相关数据
设置默认值：为所有存储的数据设置合理的默认值
避免存储大量数据：electron-store 适用于配置和小量数据，不适合大量数据存储
使用加密存储敏感信息：API 密钥等敏感信息应使用加密功能存储
监听数据变化：在需要响应数据变化的地方使用监听器
定期清理无用数据：避免存储文件无限增长

总结

electron-store 是 Electron 应用中进行本地数据存储的优秀解决方案。它简单易用，功能丰富，能够满足大多数 Electron 应用的数据存储需求。通过本文的介绍，你应该能够：

安装和配置 electron-store
使用基本的存储和读取功能
在主进程和渲染进程中使用 electron-store
利用高级功能如数据验证、监听和加密
理解 electron-store 与 localStorage 的区别
知道在何种情况下必须使用 electron-store

在实际开发中，根据项目需求选择合适的存储方案非常重要。对于简单的配置存储，electron-store 是一个非常好的选择。