简体   繁体   English

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

[英]How to save/update a HTML page locally using javascript?

So, I want to code a simple HTML page as an overlay for OBS and inside the page there is an input field which is editing content to an HTML element. 因此,我想将一个简单的HTML页面编码为OBS的覆盖层,并且页面内部有一个输入字段,用于将内容编辑为HTML元素。 I want to be able to save or update the entire page without right click Save As. 我希望能够保存或更新整个页面,而无需右键单击另存为。 Upon refreshing the page the edited content from the input field does not "stick"... Is it possible to add a piece of javascript and a button to save/update the entire HTML page with edited content? 刷新页面后,输入字段中的编辑内容不会“粘住” ...是否可以添加一段javascript和一个按钮来保存/更新带有编辑内容的整个HTML页面?

This is the code I am using right now 这是我现在正在使用代码
Input field shows the typed text. 输入字段显示键入的文本。 Upon refreshing the page, typed content is gone. 刷新页面后,键入的内容消失了。 I need to update the page so the typed content is still visible upon refreshing the HTML document. 我需要更新页面,以使键入的内容在刷新HTML文档时仍然可见。

I'm not a programmer, nor do I have extensive skills so please do not reply to my question with other questions using technical terms. 我不是程序员,也没有广泛的技能,所以请不要使用技术术语回答我的问题以及其他问题。 And please DO not post a links to other so called solutions because I've already tested 22 "solutions" and nothing worked. 并且请不要发布指向其他所谓解决方案的链接,因为我已经测试了22种“解决方案”,但没有任何效果。

Thank you. 谢谢。

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

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

If your environment supports localStorage , then it should be pretty easy: any time an input changes, alter a localStorage value. 如果您的环境支持localStorage ,那么它应该非常简单:只要输入发生更改,就可以更改localStorage值。 Also, on pageload, go through localStorage and populate each input . 另外,在pageload上,通过localStorage并填充每个input For example: 例如:

<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: 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();

I can't embed it as a stack snippet because stack snippets don't support localStorage . 我不能将其作为堆栈代码段嵌入,因为堆栈代码段不支持localStorage

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

Note that this implementation requires that each element that gets its value saved have an id , but of course you can tweak that to suit your needs. 请注意,此实现要求每个保存其value元素都具有一个id ,但是您当然可以对其进行调整以满足自己的需求。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM