嘿，这个需求其实挺常见的，纯前端就能搞定，不用后端介入也能实现。我给你拆解成导出和导入两个部分来一步步说：

核心思路就是把表单里的内容提取出来，拼成规整的文本格式，再通过浏览器的下载API生成本地文件。

实现步骤&代码示例 #

首先是HTML结构，给表单和导出按钮加上ID，表单元素一定要设置name属性（这是后续匹配的关键）：

<form id="userForm">
  <div class="form-group">
    <label>用户名：</label>
    <input type="text" name="username" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label>邮箱：</label>
    <input type="email" name="email" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label>个人简介：</label>
    <textarea name="bio" rows="3" placeholder="请输入个人简介"></textarea>
  </div>
  <button type="button" id="exportBtn">导出为TXT文件</button>
</form>

然后是JavaScript逻辑，监听导出按钮的点击事件：

document.getElementById('exportBtn').addEventListener('click', function() {
  // 1. 获取所有表单输入元素（input、textarea等）
  const formInputs = document.querySelectorAll('#userForm input, #userForm textarea');
  let txtContent = '';

  // 2. 遍历元素，拼接成键值对格式（每行一个字段）
  formInputs.forEach(input => {
    if (input.value.trim()) { // 跳过空值，避免生成无效行
      txtContent += `${input.name}: ${input.value}\n`;
    }
  });

  // 3. 创建Blob对象，指定文本类型
  const fileBlob = new Blob([txtContent], { type: 'text/plain' });
  // 4. 生成临时下载链接
  const downloadUrl = URL.createObjectURL(fileBlob);
  // 5. 创建隐藏的a标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = `表单数据_${new Date().toLocaleDateString()}.txt`; // 自定义文件名
  // 触发点击
  downloadLink.click();
  // 6. 释放临时URL，避免内存泄漏
  URL.revokeObjectURL(downloadUrl);
});

核心是读取本地TXT文件内容，解析成键值对，再匹配到对应的表单元素上。

实现步骤&代码示例 #

先在HTML里加一个文件选择控件：

<input type="file" id="importFile" accept=".txt" style="margin-top: 10px;">

然后写JavaScript的导入逻辑：

document.getElementById('importFile').addEventListener('change', function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return; // 没有选择文件就退出

  // 创建FileReader读取文本文件
  const reader = new FileReader();
  reader.onload = function(event) {
    const txtContent = event.target.result;
    // 按行分割文本内容
    const contentLines = txtContent.split('\n');

    // 遍历每一行，解析键值对
    contentLines.forEach(line => {
      const trimmedLine = line.trim();
      if (!trimmedLine) return; // 跳过空行

      // 分割键和值（注意如果值里包含冒号，只分割第一次）
      const [fieldName, ...fieldValueParts] = trimmedLine.split(': ');
      const fieldValue = fieldValueParts.join(': ');

      // 找到对应name的表单元素并赋值
      const targetInput = document.querySelector(`#userForm [name="${fieldName}"]`);
      if (targetInput) {
        targetInput.value = fieldValue;
      }
    });

    // 可选：导入完成后清空文件选择框，方便再次导入
    e.target.value = '';
    alert('表单填充完成！');
  };

  // 以文本格式读取文件
  reader.readAsText(selectedFile);
});

• 如果你的表单包含单选框、复选框这类控件，需要单独处理：导出时要记录选中的选项值，导入时要设置对应控件的checked状态，而不是直接赋值value
• 导入时可以加一些格式校验，比如如果解析不到对应字段，或者文件格式不符合预期，给用户提示
• 这种纯前端方案数据都在浏览器本地处理，不会上传到服务器，适合不需要持久化的场景

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