将来自 html 网页的多个输入的数据保存为 .txt（本地）并将它们加载回相同的位置
Posted
技术标签:
【中文标题】将来自 html 网页的多个输入的数据保存为 .txt（本地）并将它们加载回相同的位置【英文标题】：Save data from multiple inputs from html webpage as .txt (locally) and load them back at the same places 【发布时间】：2020-09-03 10:51:14 【问题描述】：我是一名年轻的编程学习者，拥有 3-4 周的 html/css 和 JS 经验。
我正在制作一个非常简单的 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 中，他回答说如果您将输入放在“类”中是可能的，因此创建一个所有这些数组，然后使用 for 循环获取所有输入：
好的，所以很难在这些中给出 HTML 代码示例 cmets，因为 WordPress 无法预测地处理它们。但 基本上，从代码中替换单个 textarea 元素 带有一堆输入的文章，它们都具有相同的类，对于 例如，“inputTextToSave”。然后替换第一行 saveTextAsFile() 函数包含以下几行：
var textToWrite = “”; var inputTextToSave = document.getElementsByClassName(“inputTextToSave”);对于 (var i = 0; 我
我不仅尝试修改我自己的代码以使其正常工作，还尝试修改他的代码，我似乎无法让它将超过 1 个输入的数据获取到单个 .txt 并重新加载。
我希望如果我成功地修改了他的代码，那么我的工作框架也可以用于我的工作。
如何修改上述代码以保存多个输入并将它们加载回相同的输入“框”？
【问题讨论】：
【参考方案1】：将来自多个来源的数据存储到一个文件中的问题在于，在加载时您不知道那堆数据的哪一部分属于什么。好吧，您甚至都不知道它可能是来自多个来源的数据。
为了解决这个问题，我们需要在文本文件中存储一些额外的信息，我们可以使用这些信息来区分不同的文本块。
一种简单的方法是以编程方式在中间添加一个分隔符 - 一个字符或您的用户很可能永远不会使用的字符序列。
假设我们有三个文本框：
TextBox 1: Here is
TextBox 2: some
TextBox 3: text
如果我们合并这些文本并添加分隔符_*_
它会变成Here is_*_some_*_text
现在我们可以使用string.split("_*_") 方法在_*_ 处拆分输入字符串并返回一个数组["Here is","some","text"]，我们可以使用它来填充文本框。
这是一个示例（只需单击“运行代码 sn-p”）：
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>【讨论】：
感谢您的宝贵时间！！出于某种原因，这个 sn-p 只能在 FF 中工作，但这很好，我可以在那里运行它，没有问题。我会尝试在我的代码中实现你，看看会发生什么！ 很高兴我能帮助 nospipi！如果您认为这是正确的答案，请考虑使用勾选按钮接受它。顺便说一句，我认为它没有理由只在 FireFox 中工作。如果您的原始脚本在其他人中工作过，那么这也应该工作。也许它只是上面的交互式 sn-p 但代码本身很好。我刚刚在 Chrome 中测试过。以上是关于将来自 html 网页的多个输入的数据保存为 .txt（本地）并将它们加载回相同的位置的主要内容，如果未能解决你的问题，请参考以下文章