问题描述
我是一位年轻的编程学习者，在html / css和JS中有3-4周的经验。
我正在制作一个非常简单的HTML页面，使用纯JavaScript输入输入并操纵这些输入。
该项目的性质是让某人用文本输入形式在表格中键入内容并在它们之间获得自动计算（这些内容在其他地方重复，加，减，乘，出现在其他地方的可打印区域中，通常很多不同的小手术）。
我毫不费力地用我目前所掌握的最少知识来发展这样一个小主意，并不断学习！
现在我已经快要完成自己的想法了，我想要一种方法来保存html中所有不同输入的数据，然后关闭浏览器（因此不应用会话存储和本地存储解决方案（？），然后将它们加载回原来的位置，因此某人可以继续处理相同的“表单”，而不必将所有不同的数据重新输入到输入中。
我知道可以在一个简单的Excel电子表格中进行类似的操作，并且我知道必须使用不同的编程语言，并且可能与服务器进行通信等。
目前，我需要使用HTML内容中的JS脚本来完成此操作。
我发现了一个使用8年的代码非常流行的代码，它可以将1个输入中的数据保存到.txt文件中（本地），还可以将这些数据从保存的.txt文件。
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中，他回答说，如果您将输入置于“类”中，则可以创建一个。全部数组，然后使用for循环获取所有输入：
好的，因此很难在其中提供HTML代码示例 评论，因为wordpress会意外地处理它们。但 基本上，从代码中替换单个textarea元素 一堆输入都具有相同类的文章，用于 例如“ inputTextToSave”。然后替换第一行 saveTextAsFile（）函数具有以下几行：
var textToWrite =“”; varinputTextToSave = document.getElementsByClassName（“ inputTextToSave”）;对于（var i = 0; i
我不仅尝试修改自己的代码以使其正常运行，而且还尝试修改他的代码，但我似乎无法使它将单个输入的.txt中的多个输入数据重新加载回去。
我希望，如果我成功修改他的代码，那么我的工作框架也可以在我的计算机上工作。
如何对上面的代码进行修改，以保存多个输入并将它们重新加载到相同的输入“框”中？
解决方法
将来自多个源的数据存储到一个文件中的问题是，在加载时，您不知道那堆数据中的哪一部分属于什么。好吧，您甚至都不知道它可能是来自多个来源的数据。
要解决此问题，我们需要在文本文件中存储一些其他信息，我们可以使用这些信息来区分不同的文本块。
一种简单的方法是通过编程方式在它们之间添加定界符-用户最有可能不会使用的字符或字符序列。
假设我们有三个文本框：
TextBox 1: Here is
TextBox 2: some
TextBox 3: text
如果我们合并这些文本并添加定界符_*_
它将变成Here is_*_some_*_text
现在，我们可以使用string.split("_*_")方法，该方法在_*_处拆分输入字符串，并返回一个数组["Here is","some","text"]，可用于填充文本框。
这是一个示例（只需单击“运行代码段”）：
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>