Electron：数据存储方式Electron-store

概述

github地址：electron-store

Electron没有内置的方法来保留用户首选项和其他数据，所以推荐使用electron-store

数据保存在app.getPath('userData')中的JSON文件中，可以在主进程和渲染器进程中直接使用此模块。
app.getPath(name)储存你应用程序设置文件的文件夹，默认是appData文件夹附加应用的名称。

安装

npm install electron-store

注意：这里安装的是最新的版本可能会出现卡死或者报错等问题，是因为与electron版本兼容性有关，可以降低版本，比如安装4.0.0版本或其他版本 npm install electron-store@4.0.0

electron-store用法

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

// console.log('size', store.size) // 获取项目总个数
// console.log('path', store.path) // 获取存储文件的路径
// console.log('store', store.store) // 获取所有数据作为对象或将当前数据替换为对象
// console.log('set', store.set()) // 存储数据
// console.log('get', store.get()) // 获取数据
// console.log('delete', store.delete()) // 删除某项数据
// console.log('clear', store.clear()) // 清除所有store数据
// console.log('has', store.has()) // 检测是否存在某条数据
// 嵌套存储
store.set({
  foo: {
    bar: {
      foobar: 'hahaha'
    }
  }
});

// 具体更细节的api可以去github上学习：https://github.com/sindresorhus/electron-store

注意事项：

• 安装时候注意版本适配
• 渲染进程直接使用会出现白屏等问题，渲染进程须通过ipcRenderer消息发送-主进程回复形式解决
• 存储简单信息，不要存储复杂大量信息，容易造成读取速度变慢。
• 每一次get都是一次i/o操作，所以尽量少操作。

对比与补充

为什么不使用window.localStorage

• localStorage仅在浏览器进程（渲染进程）中起作用。
• localStorage的容错性不是很高，因此，如果您的应用遇到错误并意外退出，则可能会丢失数据。
• localStorage仅支持持久字符串。 此模块支持任何JSON支持的类型。
• localStorage不是很安全，可能是由于xss攻击而泄漏信息。
• electron-store模块的API更好。 您可以设置并获取嵌套属性。 您可以设置默认的初始配置。

vuex和storage的区别

• vuex存储在内存，localstorage则以文件的方式存储在本地，electron-store数据存储卸载应用之后依然存在。
• 应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。
• 永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。

注意：对于不变的数据确实可以使用localstorage代替vuex，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别1。