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

Question

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. 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?

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.

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.

Thank you.

    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>

Is localStorage available to you?

CertainPerformance
– CertainPerformance

2018-08-21 06:37:57 +00:00
Commented Aug 21, 2018 at 6:37 — CertainPerformance
– CertainPerformance, Commented Aug 21, 2018 at 6:37
Yes my browser is supporting localStoarage

Dan N
– Dan N

2018-08-21 06:50:18 +00:00
Commented Aug 21, 2018 at 6:50 — Dan N
– Dan N, Commented Aug 21, 2018 at 6:50

CertainPerformance · Accepted Answer · 2018-08-21 07:12:36Z

If your environment supports localStorage, then it should be pretty easy: any time an input changes, alter a localStorage value. Also, on pageload, go through localStorage and populate each 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:

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.

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related