【electron+vue】数据持久化

背景

基于electron+vue实现的windows端安装程序，需要本地存储用户登录信息和个人配置数据，实现用户个性化配置、登录自动保活、记住密码等功能。

• 用户的个性化数据，例如：窗口大小、位置、主题、用户设置等
• 缓存数据，例如：图片、文件等
• 敏感数据，例如：用户密码、登录标识等

可选方案

• vuex+vuex-persistedstate+crypto-js数据持久化
• electron-store数据持久化

【目标功能点】

• 数据持久化；
• 敏感数据需要加密；
• 结合已有项目，快速交付。

方案1：vuex+vuex-persistedstate+crypto-js数据持久化

插件vuex-persistedstate是搭载vuex来实现数据持久化，原理是结合本地local Storage等存储方式，通过统一配置来实现持久化数据的快速读写操作。 CryptoJS是一个JavaScript的加解密的工具包。它支持多种算法的加解密。

【安装依赖】

npm install vuex-persistedstate
npm install crypto-js

【使用】

<!-- store.index.js -->
import createPersistedState from 'vuex-persistedstate'
const createPersisted = createPersistedState({
  // 存储方式：localStorage、sessionStorage、cookies
  storage: window.localStorage,
  // 存储的 key 的key值
  key: 'electron-store',
  render (state) {
    // 要存储的数据:
    return { ...state }
  }
})
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  modules: {},
  /* vuex数据持久化配置 */
  plugins: isDev ? [createLogger(), createPersisted] : [createPersisted]
})

<!-- user.vue -->
import { decrypt, encrypt } from '@/utils/encrypt'
<!-- 存储数据:encrypt单独对a加密 -->
this.$store.commit('setUserInfo', { ...this.form, a: encrypt(this.form.a)})

<!-- 获取数据：decrypt解密a数据 -->
this.form = { ...this.$store.getters.userInfo，a: decrypt(this.form.pcytthis.$store.getters.userInfo.a) }

【优缺点】

• 配置简单易用，统一配置，使用方便；
• 搭配vuex集成度高，对vue框架项目友好；

方案2：electron-store数据持久化

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

【安装依赖】

npm install electron-store

【使用】

<!-- ElectronStore.js -->
import Store from 'electron-store'
<!-- 支持加密存储 -->
const electronStore = new Store({encryptionKey: 'xxx' }) 
<!-- 属性 -->
electronStore.size  // 获取存储数据总数
electronStore.path  // 获取存储文件的路径
electronStore.store // 获取所有数据作为对象或将当前数据替换为对象
<!-- 方法 -->
electronStore.delete(key)// 删除key对应数据
electronStore.clear()    //清空数据
electronStore.has(key)   //是否有数据
electronStore.set(key, value) // 存储key对应数据，key支持.嵌套属性
electronStore.get(key)   //获取key对应数据

export default electronStore

<!-- 主进程 -->
import ElectronStore from './ElectronStore.js'
app.on('ready', async () => {
  ElectronStore.set(key, val);
})

<!-- 渲染进程 -->
ipcMain.on('getStore', async (event, key) => {
  event[key] = ElectronStore.get(key);
});
ipcMain.on('setStore', async (_event, key, val) => {
  ElectronStore.set(key, val);
});

【优点】

• 简单易用，无需安装数据库或其他依赖；
• 支持加密，自带加解密配置；
• 支持多进程访问，可以在主进程和渲染进程中使用；
• 支持点符号访问嵌套属性，支持默认值，方便数据操作；

属于electron生态组件，对electron周边支持度较好

总结

基于vue全家桶构建项目，内部使用已经集成了vuex，在保持代码稳定且快速交付的基础上采用方案1实现数据持久化, 实现用户个性化数据本地存储、登录未退出场景下的登录保活、记住密码时再次打开登录界面密码回填等功能。