How To Save Item In Local Storage Even After Refresh Using Js

I trying to make an editable Resume template. What I want from local storage to whatever the content user adds in my template would stay even after the refresh. Here is my template

Solution 1:

So one thing you are misunderstanding is that localStorage keeps the data even after refreshing the page.

Although you might want to add a check if there is data in the localstorage before adding anything to it. Right now you are adding anything without looking for anything

if(localStorage.getItem('name') == undefined ) {
           // set name data hee
}else {
           // use the pre-existing data.
}

Solution 2:

the store.onchange don't trigger, because root parent of name element is also editable, so you are changing the edit0 actually instead of changing name. You should listen on input event for id="edit".

edit.addEventListener('input', ()=> { console.log('trigger') })

when an element has contentEditable attribute, you should listen to input event.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event