如何将HTML表单数据导出到JSON文件且保留general节点

我已经掌握创建JSON对象并写入文件的方法，但在写入表单数据时，希望保留JSON文件中的general节点不被删除，同时只使用单个文件（程序另一个实例读取单个文件更便捷）。

提供的HTML表单代码：

<form>
  <table>
    <tr>
      <td></td>
      <td id="team-1-name">Team 1</td>
      <td id="team-2-name">Team 2</td>
    </tr>
    <tr>
      <td>TeamID:</td>
      <td><input id="teamid-1" type="text" value="no data" /></td>
      <td><input id="teamid-2" type="text" value="no data" /></td>
    </tr>
    <tr>
      <td>Teamname:</td>
      <td><input id="teamname-1" type="text" value="no data" /></td>
      <td><input id="teamname-2" type="text" value="no data" /></td>
    </tr>
    <tr>
      <td>Teamabbreviation:</td>
      <td><input id="teamabbr-1" type="text" value="no data" /></td>
      <td><input id="teamabbr-2" type="text" value="no data" /></td>
    </tr>
  </table>
  <input type="button" value="Save Settings" />
</form>

目标JSON文件结构：

{
  "general": {
    "some": null,
    "other": null,
    "data": null
  },
  "teams": [
    {
      "name": "",
      "abbr": "",
      "id": 0
    },
    {
      "name": "",
      "abbr": "",
      "id": 0
    }
  ]
}

核心逻辑是先读取现有JSON文件内容，保留general节点，再用表单数据覆盖teams节点，最后重新写入文件，具体实现如下：

1. 绑定保存按钮事件 #

给保存按钮添加点击监听，触发数据收集与保存流程：

document.querySelector('input[type="button"]').addEventListener('click', saveSettings);

2. 提取表单团队数据 #

编写函数收集两个团队的ID、名称和缩写：

function collectTeamData() {
  const teams = [];
  // 收集Team 1数据
  teams.push({
    id: document.getElementById('teamid-1').value || 0,
    name: document.getElementById('teamname-1').value || '',
    abbr: document.getElementById('teamabbr-1').value || ''
  });
  // 收集Team 2数据
  teams.push({
    id: document.getElementById('teamid-2').value || 0,
    name: document.getElementById('teamname-2').value || '',
    abbr: document.getElementById('teamabbr-2').value || ''
  });
  return teams;
}

3. Node.js环境下的文件读写 #

如果是Node.js环境，使用fs模块完成读取、更新、写入操作：

const fs = require('fs').promises;
const path = require('path');

async function saveSettings() {
  const filePath = path.join(__dirname, 'settings.json');
  let settings;

  try {
    // 读取现有JSON文件
    const fileContent = await fs.readFile(filePath, 'utf8');
    settings = JSON.parse(fileContent);
  } catch (err) {
    // 文件不存在时用默认结构初始化
    settings = {
      "general": {
        "some": null,
        "other": null,
        "data": null
      },
      "teams": [
        { "name": "", "abbr": "", "id": 0 },
        { "name": "", "abbr": "", "id": 0 }
      ]
    };
  }

  // 仅更新teams节点，保留general原有数据
  settings.teams = collectTeamData();

  // 格式化写入文件
  await fs.writeFile(filePath, JSON.stringify(settings, null, 2), 'utf8');
  console.log('设置已保存');
}

4. 浏览器环境下的处理（可选） #

如果是浏览器环境，通过下载文件+本地存储的方式实现：

function saveSettings() {
  let settings;
  // 从localStorage读取现有设置
  const savedSettings = localStorage.getItem('appSettings');
  if (savedSettings) {
    settings = JSON.parse(savedSettings);
  } else {
    // 初始化默认结构
    settings = {
      "general": {
        "some": null,
        "other": null,
        "data": null
      },
      "teams": [
        { "name": "", "abbr": "", "id": 0 },
        { "name": "", "abbr": "", "id": 0 }
      ]
    };
  }

  // 更新teams数据
  settings.teams = collectTeamData();

  // 生成下载链接
  const blob = new Blob([JSON.stringify(settings, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'settings.json';
  a.click();
  URL.revokeObjectURL(url);

  // 同步保存到localStorage
  localStorage.setItem('appSettings', JSON.stringify(settings));
}

关键注意事项 #

• 必须处理文件/本地存储不存在的情况，用默认结构初始化避免报错
• 仅覆盖teams节点，general节点会自动保留原有内容
• 使用JSON.stringify的第三个参数（2）格式化输出，保证JSON文件可读性

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