javascript - 如何使用 JavaScript 在本地保存/更新 HTML 页面？

Question

因此，我想编写一个简单的 HTML 页面作为 OBS 的覆盖层，并且页面内部有一个输入字段，用于将内容编辑为 HTML 元素。 我希望能够保存或更新整个页面，而无需右键单击“另存为”。 刷新页面后，输入字段中编辑的内容不会“粘住”... 是否可以添加一段 JavaScript 和一个按钮来保存/更新整个 HTML 页面的编辑内容？

这是code I am using right now
输入字段显示键入的文本。刷新页面后，输入的内容就消失了。我需要更新页面，以便在刷新 HTML 文档时键入的内容仍然可见。

我不是程序员，也没有广泛的技能，所以请不要使用技术术语来回答我的问题和其他问题。并且请不要发布其他所谓解决方案的链接，因为我已经测试了 22 个“解决方案”，但没有任何效果。

谢谢。

    document.getElementById("ChangeIt").addEventListener("keyup", myFunction);
function myFunction() {
    var elementValue = document.getElementById("ChangeIt").value;
    document.getElementById("username").innerHTML = elementValue;
}

HTML

<p><i id="username"></i></p>
<p><input id="ChangeIt" name="ChangeIt" type="text" value="" class="username"></p>
<p>Type in the box above</p>

Answer 1

如果您的环境支持 localStorage，那么它应该非常简单:只要输入更改，就可以更改 localStorage 值。此外，在页面加载时，通过 localStorage 并填充每个input。例如:

<p><i id="username"></i></p>
<p><input id="ChangeIt" name="ChangeIt" type="text" value="" class="username"></p>
<p>Type in the box above</p>

<input id="ChangeIt2" type="text" value="" class="username" placeholder="some other input">

JS:

const savedText = JSON.parse(localStorage.getItem('savedText')) || {};
Object.entries(savedText).forEach(([id, val]) => {
  document.getElementById(id).value = val;
});
document.body.addEventListener('keyup', ({ target: { value, id } }) => {
  if (!id || !value) return;
  savedText[id] = value;
  localStorage.savedText = JSON.stringify(savedText);
})


document.getElementById("ChangeIt").addEventListener("keyup", myFunction);
function myFunction() {
  var elementValue = document.getElementById("ChangeIt").value;
    document.getElementById("username").innerHTML = elementValue;
}
myFunction();

我无法将其嵌入为堆栈片段，因为堆栈片段不支持 localStorage。

https://jsfiddle.net/ev6L8z0t/4/

请注意，此实现要求保存其值的每个元素都有一个id，但当然您可以对其进行调整以满足您的需求。