Electron桌面应用AJAX POST请求成功但JSON文件无变更问题

开发者阿泽

2026-5-19

解决Electron中无法更新最近文件JSON列表的问题

嘿，我完全懂你现在的困惑——控制台明明显示AJAX请求成功，但JSON文件就是纹丝不动，刷新页面也没变化。其实问题出在jQuery AJAX根本没法用来写本地文件，这是浏览器安全机制的限制，哪怕是在Electron环境里也不例外。

为什么AJAX不行？

jQuery的AJAX是基于浏览器的XMLHttpRequest实现的，它的核心是处理HTTP请求：最多只能读取本地文件（相当于发起GET请求），但完全没有权限写入本地文件系统。你看到的"Success"只是请求本身完成了（比如读取文件成功），但数据根本没被写到文件里。

正确的姿势：用Node.js的fs模块

Electron本质是Node.js + Chromium的组合，所以我们可以直接用Node.js的fs文件系统模块来读写文件，这才是桌面应用操作本地文件的正确打开方式。

第一步：确保渲染进程能访问Node.js API

在主进程的BrowserWindow配置里，需要开启nodeIntegration（如果是Electron 12+版本，还要关闭contextIsolation，或者用更安全的preload脚本，先给你最简单的配置示例）：

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
})

第二步：实现读写最近文件列表的逻辑

直接在渲染进程里写代码，不用jQuery，用fs模块就行：

const fs = require('fs').promises; // 用异步版本，避免阻塞UI
const path = require('path');
const { app } = require('electron').remote; // 注意：Electron 14+需在主进程启用remote模块

// 把最近文件列表存在用户数据目录（这个目录有读写权限，打包后也能正常访问）
const recentFilesPath = path.join(app.getPath('userData'), 'recentFiles.json');

// 读取最近文件列表
async function loadRecentFiles() {
  try {
    const fileContent = await fs.readFile(recentFilesPath, 'utf8');
    return JSON.parse(fileContent);
  } catch (err) {
    // 如果文件不存在，返回空数组
    return [];
  }
}

// 添加新文件到最近列表（自动去重+限制数量）
async function addToRecentFiles(filePath) {
  let recentFiles = await loadRecentFiles();
  
  // 先去重，避免重复添加同一个文件
  recentFiles = recentFiles.filter(file => file !== filePath);
  // 把新文件放在最前面
  recentFiles.unshift(filePath);
  // 最多保留10个最近文件（数量可以自己调整）
  if (recentFiles.length > 10) {
    recentFiles = recentFiles.slice(0, 10);
  }
  
  // 写入到JSON文件
  await fs.writeFile(recentFilesPath, JSON.stringify(recentFiles, null, 2), 'utf8');
  console.log('最近文件列表已更新！');
}

// 调用示例：比如用户打开某个文件后执行
addToRecentFiles('/Users/you/Documents/test.txt');

（可选）更安全的方案：用Preload脚本

如果不想关闭contextIsolation（Electron官方推荐的安全做法），可以写一个preload脚本，把读写方法安全暴露给渲染进程：

主进程配置：

const { BrowserWindow } = require('electron')
const path = require('path')

const win = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js')
  }
})

preload.js文件：

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

contextBridge.exposeInMainWorld('recentFilesAPI', {
  load: () => ipcRenderer.invoke('load-recent-files'),
  add: (filePath) => ipcRenderer.invoke('add-recent-file', filePath)
});

主进程处理IPC请求：

const { ipcMain, app } = require('electron');
const fs = require('fs').promises;
const path = require('path');
const recentFilesPath = path.join(app.getPath('userData'), 'recentFiles.json');

ipcMain.handle('load-recent-files', async () => {
  try {
    const content = await fs.readFile(recentFilesPath, 'utf8');
    return JSON.parse(content);
  } catch (err) {
    return [];
  }
});

ipcMain.handle('add-recent-file', async (_, filePath) => {
  let recentFiles = await fs.readFile(recentFilesPath, 'utf8').then(JSON.parse).catch(() => []);
  recentFiles = recentFiles.filter(f => f !== filePath);
  recentFiles.unshift(filePath);
  if (recentFiles.length > 10) recentFiles = recentFiles.slice(0,10);
  await fs.writeFile(recentFilesPath, JSON.stringify(recentFiles, null, 2));
  return true;
});

渲染进程调用：

// 读取列表
window.recentFilesAPI.load().then(files => {
  console.log('最近文件:', files);
});

// 添加新文件
window.recentFilesAPI.add('/path/to/file.txt').then(() => {
  console.log('添加成功');
});

最后小提醒

别把JSON文件存在项目目录里，打包后项目目录可能变成只读的，用app.getPath('userData')是最稳妥的选择。
优先用异步的fs.promises方法，避免阻塞渲染进程的UI线程，让应用更流畅。

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