How save changes to HTML on reload?

So if I dynamically add HTML elements, and reload the page, for it to not return to default but to be shown with the changes. I'm wondering is there simple code for it?
const htmlContent = document.querySelector("body").innerHTML;
console.log(htmlContent)
localStorage.setItem('newPage', htmlContent);
const htmlContent = document.querySelector("body").innerHTML;
console.log(htmlContent)
localStorage.setItem('newPage', htmlContent);
const pageAccessedByReload = (
(window.performance.navigation && window.performance.navigation.type === 1) ||
window.performance
.getEntriesByType('navigation')
.map((nav) => nav.type)
.includes('reload')
);

if(pageAccessedByReload === true) {
console.log("lul");
let str = document.querySelector("body");
str.innerHTML = localStorage.getItem("newPage");
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
doc.body;
}
const pageAccessedByReload = (
(window.performance.navigation && window.performance.navigation.type === 1) ||
window.performance
.getEntriesByType('navigation')
.map((nav) => nav.type)
.includes('reload')
);

if(pageAccessedByReload === true) {
console.log("lul");
let str = document.querySelector("body");
str.innerHTML = localStorage.getItem("newPage");
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
doc.body;
}
This is something I found on the google but It's not working the best...
1 Reply
Lord Of Insanity
Lord Of Insanity15mo ago
You can use local storage for that, here is the mdn article for it: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Window.localStorage - Web APIs | MDN
The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.