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

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

这是
输入字段显示键入的文本。刷新页面后，键入的内容将消失。我需要更新页面，使键入的内容在刷新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>

在上面的框中键入

如果您的环境支持

localStorage

，那么它应该非常简单：只要输入发生更改，就可以更改

localStorage

值。另外，在pageload上，通过

localStorage

并填充每个

输入。例如：

<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">

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


请注意，此实现要求保存其
值的每个元素都有一个
id
，但您当然可以调整该id以满足您的需要。
您是否可以使用
localStorage
？是的，我的浏览器支持localStoarage
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();