我有一个表单，在一个名为upload.html的文件中有5个输入。使用本地存储，我能够获得输入值，并在另一个名为result.html的文件中使用它们，该文件最初是空的。现在，我想保存更新后的窗口result.html，并在单击upload.html中的某个按钮时调用它。具体该如何操作
nc1teljy1#
您可以使用localStorage.setItem（https：//developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#examples）保存result.html中的值
localStorage.setItem
result.html
bvjxkvbb2#
你可以这样处理。如果您的results.html是一个完全空的文件，并且除了存储从表单接收到的结果之外没有其他用途，那么您完全可以避免使用它，而只需要通过JS代码来使用它。在继续编写代码之前，请注意以下几点：
results.html
subimit
data-info
showSaveFilePicker
Save As
如果你对这些假设感到满意，而且它们对你很有效，请继续阅读。
const myBtn = document.getElementById("myBtn"); myBtn.onclick = async (e) => { const options = { types: [ { description: "Results", accept: { "text/html": [".html"], }, }, ], }; const handle = await window.showSaveFilePicker(options); const writable = await handle.createWritable(); // we don't want to submit the form e.preventDefault(); // let's get the inputs and their values let myInputs = document.querySelectorAll("#myForm input"); // dummy results.html + table included, as it was asked in the comment let myHtml = '<html lang="en"><head><meta charset="utf8"><title>Results</title></head><body><table><thead><tr><th>#</th><th>Question</th><th>Answer</th></thead><tbody>'; // did we find any inputs within our form? if(myInputs.length > 0) { // to mark our rows let counter = 0; for(let i = 0; i < myInputs.length; i++) { counter++; let inpVal = myInputs[i].value; let inpInfo = myInputs[i].getAttribute('data-info'); // building the rows let tempStr = '<tr><td>` + counter + '</td><td><strong>' + inpInfo + '</strong></td><td>' + inpVal + '</td></tr>'; myHtml += tempStr; } } myHtml += '</tbody></table></body></html>'; await writable.write(myHtml); await writable.close(); return handle; };
您需要对代码进行一些修改，以便使其为您工作-例如，您必须将myBtn替换为提交按钮的实际ID，将#myForm替换为实际表单的ID，等等。如果您有多个表单，您可以展开它，以捕获来自所有表单的输入，但这样您就必须有一个按钮来负责所有表单（至少可以说，这是不寻常的）。此外，如果表单中有不同类型的表单元素，您需要修改示例，为复选框、单选按钮等添加额外的复选框和循环。
myBtn
#myForm
EDIT更正了代码中的一个严重错误，并添加了实际下载。
2条答案
按热度按时间nc1teljy1#
您可以使用
localStorage.setItem（https：//developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#examples）保存result.html中的值bvjxkvbb2#
你可以这样处理。
如果您的
results.html是一个完全空的文件，并且除了存储从表单接收到的结果之外没有其他用途，那么您完全可以避免使用它，而只需要通过JS代码来使用它。在继续编写代码之前，请注意以下几点：
subimit类型的按钮data-info属性，该属性的内容可以是解释输入的任何类型的文本-您甚至可以在那里重复这个问题，尽管这并不真正可取showSaveFilePicker，所以打开Save As文件对话框只能在某些浏览器中工作，而不能在移动的设备上工作。如果你对这些假设感到满意，而且它们对你很有效，请继续阅读。
您需要对代码进行一些修改，以便使其为您工作-例如，您必须将
myBtn替换为提交按钮的实际ID，将#myForm替换为实际表单的ID，等等。如果您有多个表单，您可以展开它，以捕获来自所有表单的输入，但这样您就必须有一个按钮来负责所有表单（至少可以说，这是不寻常的）。此外，如果表单中有不同类型的表单元素，您需要修改示例，为复选框、单选按钮等添加额外的复选框和循环。
EDIT更正了代码中的一个严重错误，并添加了实际下载。