如何使用JavaScript将HTML表单数据保存到TXT文件中

受浏览器沙箱安全策略限制，客户端JavaScript无法直接写入用户本地或服务器上指定路径的已有txt文件，只能实现两种符合安全规范的存储逻辑：

1. 触发表单提交后让用户下载包含表单数据的txt文件到本地
2. 搭配后端服务，将表单数据发送到服务端后，由服务端写入服务器上的store-data.txt文件

方案1：纯前端实现，触发用户下载txt文件 #

无需后端服务，提交后会自动触发浏览器下载包含表单数据的store-data.txt文件到本地下载目录。

代码示例 #

<!-- 表单结构 -->
<form id="dataForm">
  <div>
    <label>姓名：</label>
    <input type="text" name="username" required>
  </div>
  <div>
    <label>联系方式：</label>
    <input type="tel" name="phone" required>
  </div>
  <button type="submit">提交并保存数据</button>
</form>

const form = document.getElementById('dataForm');

form.addEventListener('submit', function(e) {
  // 阻止表单默认跳转行为
  e.preventDefault();
  
  // 收集并格式化表单数据，可自定义内容格式
  const formData = new FormData(this);
  const dataObj = Object.fromEntries(formData.entries());
  const txtContent = `表单提交数据：
${JSON.stringify(dataObj, null, 2)}
提交时间：${new Date().toLocaleString()}`;

  // 生成txt文件并触发下载
  const blob = new Blob([txtContent], { type: 'text/plain' });
  const downloadUrl = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = 'store-data.txt';
  document.body.appendChild(a);
  a.click();
  // 清理临时生成的对象
  document.body.removeChild(a);
  URL.revokeObjectURL(downloadUrl);
  
  this.reset();
});

方案2：搭配后端实现写入服务端固定的store-data.txt #

如果需要把所有用户提交的表单数据都追加存储到同一个store-data.txt文件中，需要后端服务配合，以下为Node.js + Express的极简示例：

前端提交逻辑 #

const form = document.getElementById('dataForm');

form.addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const dataObj = Object.fromEntries(formData.entries());
  // 按自定义格式拼接要写入的内容
  const submitContent = `${JSON.stringify(dataObj)}|${new Date().toISOString()}\n`;

  try {
    await fetch('/save-to-txt', {
      method: 'POST',
      headers: { 'Content-Type': 'text/plain' },
      body: submitContent
    });
    alert('数据已保存');
    this.reset();
  } catch (err) {
    alert('保存失败：' + err.message);
  }
});

后端逻辑 #

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.text());
// 托管前端静态页面
app.use(express.static('public'));

// 数据写入接口
app.post('/save-to-txt', (req, res) => {
  const txtPath = path.join(__dirname, 'store-data.txt');
  // 追加写入到文件末尾，不会覆盖已有内容
  fs.appendFile(txtPath, req.body, (err) => {
    if (err) return res.status(500).send('写入失败');
    res.send('写入成功');
  });
});

app.listen(port, () => console.log(`服务运行在 http://localhost:${port}`));

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