Electron环境下表格行的JSON存储与加载问题求助

1. 先搞定Electron的存储权限问题 #

Electron渲染进程不能直接读写本地文件（安全限制），别自己硬写fs模块，新手优先选两种简单方案：

• 用electron-store库：专门给Electron做的轻量JSON存储，不用自己处理文件流，开箱即用
• IPC通信+主进程读写：渲染进程发消息给主进程，让主进程负责文件操作

2. 方案一：用electron-store快速实现 #

步骤1：安装并配置 #

项目根目录执行命令：

npm install electron-store

主进程（main.js）里初始化，并通过预加载脚本暴露给渲染进程：

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

const store = new Store();

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 必须开启，安全要求
      nodeIntegration: false
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

预加载脚本（preload.js）用contextBridge暴露存储方法：

const { contextBridge } = require('electron');
const Store = require('electron-store');
const store = new Store();

contextBridge.exposeInMainWorld('tableStore', {
  getRows: () => store.get('tableRows', []), // 无数据时返回空数组
  setRows: (rows) => store.set('tableRows', rows)
});

步骤2：表格添加行+保存数据 #

假设你的HTML结构是这样：

<table id="dataTable">
  <thead>
    <tr><th>内容1</th><th>内容2</th><th>操作</th></tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>
<button id="addRowBtn">添加新行</button>

渲染进程JS（比如renderer.js）里处理逻辑：

// 页面加载时渲染已保存的行
window.addEventListener('DOMContentLoaded', () => {
  const tableBody = document.getElementById('tableBody');
  const savedRows = window.tableStore.getRows();
  
  // 遍历渲染每一行
  savedRows.forEach(row => renderRow(row));

  // 添加新行按钮事件
  document.getElementById('addRowBtn').addEventListener('click', () => {
    // 这里替换成你实际获取输入框数据的逻辑，示例用模拟数据
    const newRow = {
      col1: `新内容${Date.now()}`,
      col2: `测试内容${Date.now()}`
    };
    
    // 先渲染到表格
    renderRow(newRow);
    // 再更新存储
    const currentRows = window.tableStore.getRows();
    currentRows.push(newRow);
    window.tableStore.setRows(currentRows);
  });
});

// 封装渲染行的函数，复用性更高
function renderRow(rowData) {
  const tableBody = document.getElementById('tableBody');
  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td>${rowData.col1}</td>
    <td>${rowData.col2}</td>
    <td><button class="delBtn">删除</button></td>
  `;
  tableBody.appendChild(tr);

  // 可选：处理删除行逻辑
  tr.querySelector('.delBtn').addEventListener('click', () => {
    tr.remove();
    const currentRows = window.tableStore.getRows();
    const updatedRows = currentRows.filter(item => item !== rowData);
    window.tableStore.setRows(updatedRows);
  });
}

3. 方案二：IPC+本地文件读写（不用第三方库） #

如果不想装库，用主进程处理文件：

步骤1：预加载脚本暴露IPC方法 #

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

contextBridge.exposeInMainWorld('tableApi', {
  saveRows: (rows) => ipcRenderer.invoke('save-table-rows', rows),
  loadRows: () => ipcRenderer.invoke('load-table-rows')
});

步骤2：主进程处理文件读写 #

const { app, BrowserWindow, ipcMain } = require('electron');
const fs = require('fs').promises;
const path = require('path');

// 把数据存在Electron的用户数据目录，避免权限问题
const dataFilePath = path.join(app.getPath('userData'), 'tableData.json');

// 监听保存请求
ipcMain.handle('save-table-rows', async (_, rows) => {
  try {
    await fs.writeFile(dataFilePath, JSON.stringify(rows, null, 2));
    return true;
  } catch (err) {
    console.error('保存失败:', err);
    return false;
  }
});

// 监听加载请求
ipcMain.handle('load-table-rows', async () => {
  try {
    const data = await fs.readFile(dataFilePath, 'utf8');
    return JSON.parse(data);
  } catch (err) {
    // 文件不存在时返回空数组
    if (err.code === 'ENOENT') return [];
    console.error('加载失败:', err);
    return [];
  }
});

// 窗口创建逻辑和之前一样...

步骤3：渲染进程调用IPC方法 #

window.addEventListener('DOMContentLoaded', async () => {
  const savedRows = await window.tableApi.loadRows();
  savedRows.forEach(row => renderRow(row));

  document.getElementById('addRowBtn').addEventListener('click', async () => {
    const newRow = { col1: '新内容', col2: '测试内容' };
    renderRow(newRow);
    const currentRows = await window.tableApi.loadRows();
    currentRows.push(newRow);
    await window.tableApi.saveRows(currentRows);
  });
});

// renderRow函数和之前一样...

4. 常见坑排查 #

• 之前直接用JSON.stringify/parse失败：大概率是渲染进程没文件权限，别在渲染进程里写fs
• 数据没保存：检查是否调用了存储方法，以及electron-store或文件路径是否配置正确
• 标签页加载时没渲染：必须在DOMContentLoaded事件里执行渲染逻辑，不然DOM还没生成

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