背景

electron 桌面应用有“数据持久化”的诉求

需求可以简单理解为：需要保存用户最后一次使用应用的页面状态、当用户下次打开应用，可以直接恢复至上一次的使用状态

核心技术选型

React + webpack + electron

问题描述

作为一个前端开发的老同学了，自然第一个想到的就是 localStorage，一顿操作之后遇到问题如下：

由于渲染进程和主进程采用分开启动服务、发现如果渲染进程的服务关闭、再次打开、localStorage 可以缓存上一次的页面状态、也就是说、页面可以恢复上一次用户离开时候的状态。

但是......如果主进程关闭再次打开，会发现 localStorage 被清空、可以理解为整个应用完全被初始化、恢复到最原始最干净的状态，自然也就包括 electron 中 chromium 内核状态和所有存储的数据

本着锲而不舍面向浏览器编程的精神，没有在 electron 官网找到相关内容，但是找到了 electron-store 的方案

又是一顿操作、诶诶诶～～～，我只是引入了一个 electron-store 还什么都没干，怎么就页面卡死了，报错如下：

报错：Uncaught TypeError: fs.existsSync is not a function

作为一个老前端er了，这一看不就是调用到了 node 层的 Api 了嘛，那肯定是使用姿势不对麻～

找到 electron-store 文档，首先是 npmjs.com，霍～那叫一个干净(后面发现只有在ubuntu上打开很干净，惊.jpg)，不比我钱包差多少了，又转到 github、文档倒是有了，但是描述得那叫一个含糊（高情商：写得点到为止）

恶心～ yue 不下去了，直接说最后的解决方案吧👇👇👇

解决

首先需要在 主进程 初始化

const Store = require('electron-store');
// 初始化
Store.initRenderer();

其次需要在渲染进程实例化（这里文档说需要在主进程实例化），如果前端打包工具不是使用的 webpack ，问题在这里就已经解决了，但是，2202年了，不用webapck前端项目还有多少？所以~ 可使用如下方式解决：

const Store = require("electron-store");
// 替换为如👇：
const Store = window.require("electron-store");

// 注意只能用 require ， 不能用 import
const store = new Store()

简单理解

直接使用 require 和 import 的时候，require 会被 webpack 转译、使用 window.require 不会

electron+webpack数据持久化踩坑记

背景

核心技术选型

问题描述

解决

简单理解