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/

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

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

1 个答案: