Electron应用访问localStorage问题：读取存储的元素位置类方法咨询

嘿，这个问题我太熟了——Electron里不同页面的localStorage本来就是隔离的，每个渲染进程（不管是新窗口还是同一个窗口加载的新页面）都有自己独立的存储上下文，切换页面后自然读不到之前存的内容。下面给你几个实用的解决方案，从主进程管理到页面自行处理都有：

这个方案用electron-store（Electron官方推荐的轻量级持久化库）让主进程负责存储所有页面的元素位置数据，所有渲染进程通过IPC和主进程交互，彻底解决隔离问题。

步骤如下：

1. 首先安装依赖：

npm install electron-store

2. 主进程代码示例：

const { app, BrowserWindow, ipcMain } = require('electron');
const Store = require('electron-store');

// 初始化持久化存储
const store = new Store();

// 监听渲染进程的保存请求
ipcMain.handle('save-element-positions', async (_, positionData) => {
  store.set('elementPositions', positionData);
  return true;
});

// 监听渲染进程的读取请求
ipcMain.handle('get-element-positions', async () => {
  // 没有数据时返回空对象
  return store.get('elementPositions', {});
});

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // 用preload暴露IPC接口给渲染进程
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

3. 新增preload.js文件，安全暴露IPC接口：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  saveElementPositions: (data) => ipcRenderer.invoke('save-element-positions', data),
  getElementPositions: () => ipcRenderer.invoke('get-element-positions')
});

4. 渲染进程（页面）代码示例：

// 拖动结束时保存元素位置
async function saveElementPosition(elementId, x, y) {
  const currentPositions = await window.electronAPI.getElementPositions();
  currentPositions[elementId] = { x, y };
  await window.electronAPI.saveElementPositions(currentPositions);
}

// 页面加载时恢复元素位置
async function restoreElementPositions() {
  const positions = await window.electronAPI.getElementPositions();
  Object.keys(positions).forEach(elementId => {
    const el = document.getElementById(elementId);
    if (el) {
      el.style.left = `${positions[elementId].x}px`;
      el.style.top = `${positions[elementId].y}px`;
    }
  });
}

// 页面加载完成后执行恢复逻辑
window.addEventListener('DOMContentLoaded', restoreElementPositions);

如果不想引入额外依赖，可以通过配置Electron的partition属性，让多个窗口/页面共享同一个session，这样它们的localStorage就会互通。

代码示例（创建窗口时配置）：

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 前缀persist:表示这个session会持久化到磁盘，重启应用依然有效
      partition: 'persist:my-app-shared-storage'
    }
  });

  mainWindow.loadFile('index.html');
}

注意：所有需要共享localStorage的窗口，都要设置相同的partition值。如果是同一个窗口内导航到新页面，只要窗口的partition不变，新页面就能读取之前的localStorage数据。

如果完全不想依赖主进程，可以通过前端方式同步数据：

• 若在同一个窗口内导航，可在页面beforeunload事件里把位置数据存入sessionStorage，新页面加载时直接读取sessionStorage；
• 若打开新窗口，可通过window.open的返回对象，用postMessage传递数据，新页面监听message事件接收数据后存入自身的localStorage。

这种方案局限性较大，仅适合简单的单窗口或同源页面场景，不推荐复杂应用使用。

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