如何通过JavaScript实现点击按钮向本地JSON文件推送数据？

纯前端JavaScript能否直接写入本地data.json文件？ #

不能。浏览器出于安全限制，不允许前端JavaScript直接读写用户本地文件系统中的文件，防止恶意网站窃取或篡改用户本地数据。你代码里的FileSystem.writeFile是Node.js环境的API，浏览器环境并不支持。

可行解决方案 #

1. 搭配后端服务（生产环境最常用方案） #

前端通过HTTP请求把数据传给后端，由后端负责读写本地的data.json文件。这里举个Node.js + Express的简单示例：

后端代码（server.js）

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
app.use(express.json());

// 处理前端的保存请求
app.post('/save-task', (req, res) => {
  const dataPath = path.join(__dirname, 'data.json');
  // 先读取现有数据，再追加新任务（如果需要覆盖则直接写入）
  fs.readFile(dataPath, 'utf8', (err, data) => {
    let tasks = [];
    if (!err && data) {
      tasks = JSON.parse(data);
    }
    tasks.push(req.body);
    fs.writeFile(dataPath, JSON.stringify(tasks), (err) => {
      if (err) {
        return res.status(500).send('保存失败');
      }
      res.send('保存成功');
    });
  });
});

app.listen(3000, () => console.log('服务运行在 http://localhost:3000'));

前端修改后的script.js

document.getElementById('submit').addEventListener('click', async function () {
  const task = document.getElementById('new_task').value;
  const task_deadline = document.getElementById('task_deadline').value;
  const push_data = {
    "item": task,
    "deadline": task_deadline
  };

  try {
    const response = await fetch('http://localhost:3000/save-task', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(push_data),
    });
    const result = await response.text();
    console.log(result);
  } catch (error) {
    console.error('请求失败:', error);
  }
});

2. 使用浏览器本地存储（仅在浏览器内保存数据） #

如果不需要修改本地的data.json文件，只是想在浏览器中临时或持久存储数据，可以用localStorage或sessionStorage：

document.getElementById('submit').addEventListener('click', function () {
  const task = document.getElementById('new_task').value;
  const task_deadline = document.getElementById('task_deadline').value;
  const push_data = {
    "item": task,
    "deadline": task_deadline
  };

  // 读取已存储的任务列表，没有则初始化为空数组
  let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.push(push_data);
  // 保存到localStorage
  localStorage.setItem('tasks', JSON.stringify(tasks));
  console.log('数据已保存到浏览器本地存储');
});

注意：这种方式的数据只存在浏览器中，清除浏览器缓存会丢失，不会修改本地的data.json文件。

3. 生成JSON文件供用户手动下载 #

前端可以生成包含数据的JSON内容，然后创建下载链接，让用户手动保存到本地：

document.getElementById('submit').addEventListener('click', function () {
  const task = document.getElementById('new_task').value;
  const task_deadline = document.getElementById('task_deadline').value;
  const push_data = {
    "item": task,
    "deadline": task_deadline
  };

  // 格式化JSON字符串，方便阅读
  const jsonStr = JSON.stringify(push_data, null, 2);
  // 创建Blob对象存储JSON内容
  const blob = new Blob([jsonStr], { type: 'application/json' });
  // 生成下载链接
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.json'; // 指定下载的文件名
  document.body.appendChild(a);
  a.click();
  // 清理临时资源
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
});

这种方式需要用户手动将文件保存到指定目录，无法自动写入本地已存在的data.json，但能让用户获取包含数据的JSON文件。

4. 使用Electron开发桌面应用（适用于桌面程序场景） #

如果是开发桌面应用，可以用Electron框架，它允许在渲染进程中使用Node.js的文件系统API（需要配置权限），从而直接读写本地文件：

// Electron渲染进程代码（需在main.js中配置nodeIntegration: true）
const fs = require('fs');
const path = require('path');

document.getElementById('submit').addEventListener('click', function () {
  const task = document.getElementById('new_task').value;
  const task_deadline = document.getElementById('task_deadline').value;
  const push_data = {
    "item": task,
    "deadline": task_deadline
  };

  const dataPath = path.join(__dirname, 'data.json');
  fs.writeFile(dataPath, JSON.stringify(push_data), (err) => {
    if (err) throw err;
    console.log('数据已写入本地data.json文件');
  });
});

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