如何在Electron应用中修改浏览器localStorage的存储值

localStorage 是浏览器渲染环境提供的 Web API，Electron 的主进程（main.js 所属的运行环境）基于 Node.js 运行，全局不存在 localStorage 对象，直接调用就会抛出未定义的报错。

场景1：需要修改渲染进程侧的 localStorage 值 #

通过 Electron 的 IPC 通信机制，主进程发消息通知渲染进程执行修改操作：

1. 主进程（main.js）侧代码：

// 拿到你要通信的渲染窗口实例
const targetWindow = BrowserWindow.getFocusedWindow() // 也可以替换为你自己保存的对应窗口实例
// 向渲染进程发送修改通知
targetWindow.webContents.send('update-local-storage', {
  key: 'inMeeting',
  value: false
})

2. 若开启了上下文隔离（Electron 高版本默认开启），需要先在预加载脚本（preload.js）中暴露通信接口：

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  onUpdateLocalStorage: (callback) => ipcRenderer.on('update-local-storage', (_event, data) => callback(data))
})

3. 渲染进程侧代码：

window.electronAPI.onUpdateLocalStorage((data) => {
  localStorage.setItem(data.key, data.value)
})

场景2：仅需要在主进程侧做持久化数据存储 #

推荐直接使用专门适配 Electron 主进程的存储库 electron-store，用法和 localStorage 类似：

1. 安装依赖：
   npm install electron-store
2. 主进程（main.js）中使用：

const Store = require('electron-store')
const store = new Store()
// 存值
store.set('inMeeting', false)
// 取值
const inMeeting = store.get('inMeeting')

数据会默认持久化存在系统对应应用配置目录下，重启应用不会丢失。

内容的提问来源于stack exchange，提问作者sneha