如何用JavaScript将多HTML表单数据保存到同一CSV并实现后端更新

我是JavaScript新手，正在开发语音数据收集GUI，现有两个HTML文件，希望用JavaScript将这两个文件中的指定值保存为CSV格式。我的代码如下：

var number = document.getElementById('number').value
var student = document.getElementById('student').value
var csvFileData = [  
 [number, student],   
];  

//create a user-defined function to download CSV file   
function download_csv_file() {  

    //define the heading for each row of the data  
    var csv = 'Name,Profession\n';  

    //merge the data with CSV  
    csvFileData.forEach(function(row) {  
            csv += row.join(',');  
            csv += "\n";  
    });  

    //display the created CSV data on the web browser   
    document.write(csv);  

    var hiddenElement = document.createElement('a');  
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);  
    hiddenElement.target = '_blank';  

    //provide the name for the CSV file to be downloaded  
    hiddenElement.download = 'data.csv';  
    hiddenElement.click();

我有两个问题：

1. 是否可以将另一个HTML文件的数据保存到已生成的同一CSV文件中？目前每次从另一个HTML文件保存时都会覆盖旧数据。
2. 如何无需每次下载文件就能在后端更新表格？

问题1：跨HTML文件追加数据到同一CSV #

浏览器的安全机制禁止直接读写本地文件内容，没法直接在前端实现跨页面追加本地CSV。有两种可行方案：

• 前端暂存后统一导出：用localStorage或sessionStorage在浏览器中暂存数据。第一个页面提交数据时，把数据存入存储；第二个页面读取已有数据，追加新内容后再导出完整CSV。示例代码：

  // 第一个页面：保存数据到localStorage
  function saveData() {
    const number = document.getElementById('number').value;
    const student = document.getElementById('student').value;
    // 读取已有数据，无数据则初始化空数组
    let savedData = JSON.parse(localStorage.getItem('csvData')) || [];
    savedData.push([number, student]);
    localStorage.setItem('csvData', JSON.stringify(savedData));
  }
  
  // 第二个页面：导出所有数据为CSV
  function download_csv_file() {
    let savedData = JSON.parse(localStorage.getItem('csvData')) || [];
    let csv = 'Name,Profession\n';
    savedData.forEach(row => {
      csv += row.join(',') + '\n';
    });
    // 执行下载逻辑
    const hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    hiddenElement.download = 'data.csv';
    hiddenElement.click();
    // 可选：导出后清空存储
    localStorage.removeItem('csvData');
  }
  

• 后端中转存储：两个页面都把数据提交到后端接口，后端将数据存入数据库或服务器文件。需要导出时，后端整合所有数据生成CSV文件返回给用户。这种方式更适合长期保存或数据量大的场景。

问题2：无需下载更新后端表格 #

必须依赖后端服务，前端负责把数据发送到后端，由后端处理表格更新：

1. 前端用fetch发送数据到后端接口：

   function sendDataToBackend() {
     const number = document.getElementById('number').value;
     const student = document.getElementById('student').value;
     fetch('/api/save-data', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({ number, student }),
     })
     .then(res => res.json())
     .then(data => {
       console.log('数据提交成功');
       // 可添加成功提示，比如更新页面状态
     })
     .catch(err => console.error('提交失败', err));
   }
   

2. 后端实现对应接口，接收数据后写入数据库（如MySQL、MongoDB）或更新服务器上的表格文件。后续导出CSV时，直接从后端读取完整数据生成文件即可。

内容的提问来源于stack exchange，提问作者Amartya Roy Choudhury