Electron 通用数据持久化 适合vue、react...

前言

理论上在 Electron 应用程序中，localStorage 是基于每个源（origin）存储的，这意味着它是与特定协议、主机名和端口绑定的。当 Electron 应用重启时，通常情况下 localStorage 中的数据应该会保持不变，不会自动清空。但是我偏偏遇到了这个问题。

• 背景：由于特殊需求，访问我们的网站需要通过一个客户端来使用。所以，使用了electron的loadURL api 嵌入了链接。
• 问题：登录后的token的用户数据会保存在localstorage中，在electron中，这份数据默认是持久化的，但是在个别window电脑中每次重启软件，都需要重新登录网页，导致了用户的投诉。
• 原因：原因不详，升级Electron也没有解决。原因估计会有很多种，比如系统原因、权限原因等，但是无法去一一排查和兼容，所以想使用一劳永逸的方法，直接持久化数据。

解决方法: 持久化

Electron 内置的 electron-store 或者 electron-json-storage 插件，这些插件能够确保数据安全地存储在用户的应用数据目录下，即使应用重启或系统重启也能保持数据完整。

本文主要讲如何利用electron-store数据持久化保存用户的密码，自动登录。无论是用在vue项目或者react项目都是可以的。

它的使用场景可以有很多，保存登录信息只是其中一个使用场景。

具体步骤和代码

1. 主线程暴露保存数据的方法
2. 渲染端在登录的时候，把密码保传给Electron存起来，并标记时间
3. 下载在登录界面时，从主线程获取密码，调用登录接口自动登录
4. 如果用户主动退出登录，则清空数据

主进程

---

electron/main.js

const {
    app, BrowserWindow, ipcMain, Menu } = require('electron')
const path = require('path')
const Store = require('electron-store')
const Config = require('./config/env.js')

// 数据持久化
const store = new Store()

// 定义ipcRenderer监听事件
initIpcRenderer()

let mainWindow = null
function createWindow() {
   
  mainWindow = new BrowserWindow({
   
    width: 1920,
    height: 1200,
    webPreferences: {
   
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadURL(Config.url)
}

app.