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

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

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

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

用我目前掌握的最少知识和正在学习的知识，我毫无困难地发展出这样一个小想法

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

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

目前，我需要在HTML内容中用JS脚本完成这项工作

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

要保存的文本：
要另存为的文件名：
将文本保存到文件
选择要加载的文件：
加载所选文件
函数saveTextAsFile（）
{
var textToSave=document.getElementById（“InputExttosave”）.value；
var textToSaveAsBlob=新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=“下载文件”；
downloadLink.href=textToSaveAsURL；
downloadLink.onclick=destroyClickedElement；
downloadLink.style.display=“无”；
document.body.appendChild（下载链接）；
downloadLink.click（）；
}
函数销毁ClickedElement（事件）
{
document.body.removeChild（event.target）；
}
函数loadFileAsText（）
{
var fileToLoad=document.getElementById（“fileToLoad”）.files[0]；
var fileReader=newfilereader（）；
fileReader.onload=函数（fileLoadedEvent）
{
var textFromFileLoaded=fileloadevent.target.result；
document.getElementById（“inputTextToSave”）.value=textFromFileLoaded；
};
readAsText（fileToLoad，“UTF-8”）；
}

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

好的，所以很难给出这些HTML代码示例 评论，因为WordPress不可预知地处理它们 基本上，替换中代码中的单个textarea元素 文章中包含一组输入，这些输入都具有相同的类，例如 例如，“InputExtToSave”。然后替换 saveTextAsFile（）函数，其中包含以下行：

var textToWrite=“”；var inputsTextToSave= document.getElementsByClassName（“InputExtToSave”）；for（var i=0；i 我不仅试图修改我自己的代码使其工作，而且还试图修改他的代码，我似乎无法使其将多个输入的数据获取到单个.txt并将其加载回

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

---

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

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

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

一种简单的方法是以编程方式在两者之间添加一个分隔符—一个用户最可能不会使用的字符或字符序列

假设我们有三个文本框：

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

如果我们合并这些文本并添加一个分隔符

它将变成

这里是一些文本

现在，我们可以使用

string.split（“.*.”

方法，该方法在

.*.

处拆分输入字符串，并返回一个数组

[“Here is”，“some”，“text”]

，我们可以使用该数组填充文本框

下面是一个示例（只需单击“运行代码段”）：

var separator=“\u*\ ux”；
var textboxs=[“InputExtToSave1”、“InputExtToSave2”]；
函数saveTextAsFile（）{
var textToSave=“”；
对于（var a=0；aTextBox 1: Here is
TextBox 2: some
TextBox 3: text