基于JavaScript/JSON实现输入值的保存与加载功能开发需求

功能需求 #

• 提供3个可输入任意内容的文本输入框
• 点击「SAVE」按钮，将三个输入框的内容导出为.txt文件供下载
• 点击「选择文件」按钮，可将本地.txt文件中的内容加载并回填到对应的输入框中（保存格式不限于JSON数组，可灵活调整）

原代码问题修正 #

原加载函数(load_func)存在两处问题：

1. 错误地将内容赋值给表单元素而非输入框
2. 仅处理了第一个输入框的内容，未完成三个输入框的回填

以下是修正后的完整代码：

HTML 代码 #

<form id="inputs">
  <label for="Question1">输入框1</label>
  <br />
  <input type="text" id="Question1" class="input-box" name="Question1name" /><br />
  <br />
  <label for="Question2">输入框2</label>
  <br />
  <input type="text" id="Question2" class="input-box" name="Question2name" /><br />
  <br />
  <label for="Question3">输入框3</label>
  <br />
  <input type="text" id="Question3" class="input-box" name="Question3name" /><br />
  <br />
  <button type="button" onclick="save_func()">SAVE</button>
  <span> 或加载本地文件：</span>
  <input id="load" type="file" accept=".txt" onchange="load_func()">
</form>

注：给按钮添加type="button"避免表单默认提交行为，同时给文件选择框添加accept=".txt"限制仅选择文本文件，提升用户体验

JavaScript 代码 #

function save_func() {
  // 获取三个输入框的值
  const quest1 = document.getElementById("Question1").value;
  const quest2 = document.getElementById("Question2").value;
  const quest3 = document.getElementById("Question3").value;
  
  // 可选格式1：JSON数组（原格式）
  const data = [quest1, quest2, quest3];
  const dataString = JSON.stringify(data);
  
  // 可选格式2：换行分隔的文本（如果需要更易读的纯文本格式，可替换上面两行）
  // const dataString = `${quest1}\n${quest2}\n${quest3}`;
  
  // 创建Blob并触发下载
  const file = new Blob([dataString], { type: "text/plain" });
  const anchor = document.createElement("a");
  anchor.href = URL.createObjectURL(file);
  anchor.download = "MyInputData.txt";
  anchor.click();
  // 释放URL对象，避免内存泄漏
  URL.revokeObjectURL(anchor.href);
}

function load_func() {
  const file = document.getElementById("load").files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onloadend = function() {
    try {
      // 先尝试按JSON格式解析（对应保存的JSON数组格式）
      const loadedData = JSON.parse(reader.result);
      if (Array.isArray(loadedData) && loadedData.length >= 3) {
        document.getElementById("Question1").value = loadedData[0] || "";
        document.getElementById("Question2").value = loadedData[1] || "";
        document.getElementById("Question3").value = loadedData[2] || "";
      } else {
        // 如果不是JSON数组，尝试按换行分隔解析
        const lines = reader.result.split("\n").map(line => line.trim());
        document.getElementById("Question1").value = lines[0] || "";
        document.getElementById("Question2").value = lines[1] || "";
        document.getElementById("Question3").value = lines[2] || "";
      }
    } catch (e) {
      // 解析失败时按换行分隔处理
      const lines = reader.result.split("\n").map(line => line.trim());
      document.getElementById("Question1").value = lines[0] || "";
      document.getElementById("Question2").value = lines[1] || "";
      document.getElementById("Question3").value = lines[2] || "";
    }
  };
  reader.readAsText(file);
}

代码说明 #

1. 保存功能：
   • 支持两种保存格式：JSON数组或纯文本换行分隔，可根据需求切换
   • 添加了URL.revokeObjectURL释放资源，避免内存泄漏
2. 加载功能：
   • 兼容JSON数组和纯文本换行两种格式的文件加载
   • 增加错误处理，避免解析失败导致功能异常
   • 完成三个输入框的内容回填
3. 体验优化：
   • 按钮添加type="button"防止表单提交
   • 文件选择框限制仅选择.txt文件

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