将来自 html 网页的多个输入的数据保存为 .txt（本地）并将它们加载回相同的位置

Question

我是一名年轻的编程学习者，在 html/css 和 JS 方面有 3-4 周的经验。

我正在制作一个非常简单的 HTML 页面，输入并使用普通 JavaScript 操作这些输入。

这个项目的性质是让某人在带有文本类型输入的表单中键入内容并在它们之间进行自动计算（在其他地方重复的内容，添加，减去，乘法，出现在其他地方的可打印区域并且通常很多不同的小操作）。

我用我目前所掌握的最少知识开发这样一个小想法并在途中学习没有困难！

现在我已经快要完成我的想法了，我想要一种方法来保存我 html 中所有不同输入的数据，关闭浏览器（因此没有会话存储并应用本地存储解决方案（？），然后将它们加载回原来的位置，这样某人就可以继续处理相同的“表单”，而不必将所有不同的数据重新输入到输入中。

我知道类似这样的事情可以在一个简单的 Excel 电子表格中进行，而且我知道必须使用不同的编程语言，可能还需要使用服务器通信等。

目前我需要在 HTML 内容中使用 JS 脚本完成此操作。

我发现了一段看似非常流行的 8 年前代码，它设法将数据从 1 个输入保存到 .txt 文件（本地），并且还能够将这些数据加载回相同的输入来自保存的 .txt 文件。

https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

https://thiscouldbebetter.neocities.org/texteditor.html

<html>
<body>
 
<table>
    <tr><td>Text to Save:</td></tr>
    <tr>
        <td colspan="3">
            <textarea id="inputTextToSave" cols="80" rows="25"></textarea>
        </td>
    </tr>
    <tr>
        <td>Filename to Save As:</td>
        <td><input id="inputFileNameToSaveAs"></input></td>
        <td><button onclick="saveTextAsFile()">Save Text to File</button></td>
    </tr>
    <tr>
        <td>Select a File to Load:</td>
        <td><input type="file" id="fileToLoad"></td>
        <td><button onclick="loadFileAsText()">Load Selected File</button><td>
    </tr>
</table>
 
<script type="text/javascript">
 
function saveTextAsFile()
{
    var textToSave = document.getElementById("inputTextToSave").value;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
 
    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
 
    downloadLink.click();
}
 
function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}
 
function loadFileAsText()
{
    var fileToLoad = document.getElementById("fileToLoad").files[0];
 
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) 
    {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("inputTextToSave").value = textFromFileLoaded;
    };
    fileReader.readAsText(fileToLoad, "UTF-8");
}
 
</script>
 
</body>
</html>

这篇文章的创作者被问及是否有人可以修改它并使其可以在 1.txt 中保存多个输入，他回答说如果你把你的输入放在一个“class"，因此创建一个包含所有这些的数组，然后使用 for 循环获取它们的所有输入：

Okay, so it’s really hard to give HTML code examples in these comments, because WordPress handles them out unpredictably. But basically, replace the single textarea element from the code in the article with a bunch of inputs that all have the same class, for example, “inputTextToSave”. Then replace the first line of the saveTextAsFile() function with these lines:

var textToWrite = “”; var inputsTextToSave = document.getElementsByClassName(“inputTextToSave”); for (var i = 0; i < inputsTextToSave.length; i++) { var inputTextToSave = inputsTextToSave[i]; var textFromInput = inputTextToSave.value; textToWrite += textFromInput; }

我不仅尝试修改我自己的代码以使其工作，而且还尝试修改他的代码，但我似乎无法将超过 1 个输入的数据获取到单个 .txt 并将其加载回来。

我希望如果我成功修改了他的代码，那么我的工作框架也能正常工作。

如何修改上述代码以保存多个输入并将它们加载回相同的输入“框”？

Answer 1

将来自多个来源的数据存储到一个文件中的问题在于，在加载时您不知道那一堆数据的哪一部分属于什么。好吧，你甚至不知道它可能是来自多个来源的数据。

为了解决这个问题，我们需要在文本文件中存储一些额外的信息，我们可以使用这些信息来区分不同的文本块。

一种简单的方法是以编程方式添加分隔符 in-between - 您的用户很可能永远不会使用的字符或字符序列。

假设我们有三个文本框：

TextBox 1: Here is
TextBox 2: some
TextBox 3: text

如果我们合并这些文本并添加分隔符_*_

会变成Here is_*_some_*_text

现在我们可以使用 string.split("_*_") 方法将输入字符串拆分为 _*_ 和 returns 数组 ["Here is","some","text"] 我们可以用来填充文本框。

这是一个例子（只需点击 'Run code snippet'）：

var separator = "_*_";
var textBoxes = ["inputTextToSave1", "inputTextToSave2"];

function saveTextAsFile() {
  var textToSave = "";
  for (var a = 0; a < textBoxes.length; a++) {
    textToSave += a < textBoxes.length - 1 ? document.getElementById(textBoxes[a]).value + separator : document.getElementById(textBoxes[a]).value;
  }
  var textToSaveAsBlob = new Blob([textToSave], {
    type: "text/plain"
  });
  var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
  var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  downloadLink.href = textToSaveAsURL;
  downloadLink.onclick = destroyClickedElement;
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);

  downloadLink.click();
}

function destroyClickedElement(event) {
  document.body.removeChild(event.target);
}

function loadFileAsText() {
  var fileToLoad = document.getElementById("fileToLoad").files[0];

  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent) {
    var textFromFileLoaded = fileLoadedEvent.target.result;
    var textesArray = textFromFileLoaded.split(separator);
    for (var a = 0; a < textBoxes.length; a++) {
      document.getElementById(textBoxes[a]).value = textesArray[a];
    }
  };
  fileReader.readAsText(fileToLoad, "UTF-8");
}

<table>
  <tr>
    <td>Text to Save:</td>
  </tr>
  <tr>
    <td colspan="3">
      <textarea id="inputTextToSave1" cols="80" rows="5"></textarea>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <textarea id="inputTextToSave2" cols="80" rows="5"></textarea>
    </td>
  </tr>
  <tr>
    <td>Filename to Save As:</td>
    <td><input id="inputFileNameToSaveAs"></td>
    <td><button onclick="saveTextAsFile()">Save Text to File</button></td>
  </tr>
  <tr>
    <td>Select a File to Load:</td>
    <td><input type="file" id="fileToLoad"></td>
    <td><button onclick="loadFileAsText()">Load Selected File</button></td>
  </tr>
</table>

将来自 html 网页的多个输入的数据保存为 .txt（本地）并将它们加载回相同的位置

Save data from multiple inputs from html webpage as .txt (locally) and load them back at the same places

html

javascript

input

save