Kevin Powell - Community•2y ago

How do I save whole HTML page with changes in localStorage, and load it up upon browser refresh?

WITH WORKING JS* It does not need to be HTML, it can be <body> or even <container> (in my case, container is named "refresh-div"). Project link: https://astonishing-cupcake-035f30.netlify.app/

const htmlContent = document.querySelector(".refresh-div").innerHTML;
localStorage.setItem('newPage', htmlContent);

const htmlContent = document.querySelector(".refresh-div").innerHTML;
localStorage.setItem('newPage', htmlContent);

const refressLul = document.querySelector(".refresh-div")
if(pageAccessedByReload === true) {
  refressLul.innerHTML = localStorage.getItem("newPage"); 
}

const refressLul = document.querySelector(".refresh-div")
if(pageAccessedByReload === true) {
  refressLul.innerHTML = localStorage.getItem("newPage"); 
}

Code above is what I was doing. While it does load changed HTML, some JS is not working at all. Any ideas on how to properly do it? Try adding comments, saving those changes, then loading them upon refresh with all of the things working properly(reply, edit, delete etc.)

4 Replies

b1mind•2y ago

Why not just a multi page? 😄 I know that is not helpful but I keep asking myself (why are they doing this?)

DovahOP•2y ago

@b1mind Me robot me follow rules. xD Jokes aside, that is what project says. And while it may be useless or even stupid, I just want to know how to do it at this point. xD Because it looks super easy, but it does not work. Or even worse, it half works. My page freezes and scroll no longer works, it enters some eternal loop. xD Or something

b1mind•2y ago

You are following some tutorial or lesson?

DovahOP•2y ago

FrontEndMentor. It is one of the objectives in one of the projects. - Bonus: If you're building a purely front-end project, use localStorage to save the current state in the browser that persists when the browser is refreshed. Big blue REFRESH button is there for fun, ignore it. xD I mean on browser refresh (F5) Oh Done xD I just needed to put code above main function with all the JS thingies

Gaming

Programming

How do I save whole HTML page with changes in localStorage, and load it up upon browser refresh?