Как я могу восстановить страницу в его первоначальном состоянии, если состояние веб -сайта сохраняется в локальном храни ⇐ Javascript

[Anonymous]

Я хочу добавить кнопку сброса на веб -сайт ниже, которая вернет веб -страницу в его начальное состояние. Может ли кто -нибудь помочь мне с этим? < /P>
Заранее. < /P>





body {
margin: 0;
background: #000000;
}

div.removable {
color: #ffffff;
font-size: 25px;
font-family: Arial;
padding: 12px 8px 12px 10px;
cursor: pointer;
}

button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
position: fixed;
top: 10px; /* Pas deze waarde aan om de verticale positie te bepalen */
right: 10px; /* Pas deze waarde aan om de horizontale positie te bepalen */
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
z-index: 1000; /* Zorg ervoor dat de knop boven andere elementen ligt */
}




Task 1
Task 2
Task 3

Undo


const removalHistory = []; // Array om verwijderde elementen en hun posities op te slaan
const listContainer = document.body; // De container van de verwijderbare elementen

// Functie om de huidige staat van de lijst op te slaan in Local Storage
function saveListState() {
const remainingItems = Array.from(document.querySelectorAll('.removable')).map(item => item.textContent);
localStorage.setItem('todoListState', JSON.stringify(remainingItems));
}

// Functie om de opgeslagen staat van de lijst te laden
function loadListState() {
const savedState = localStorage.getItem('todoListState');
if (savedState) {
const items = JSON.parse(savedState);
// Verwijder alle bestaande items
document.querySelectorAll('.removable').forEach(item => item.remove());
// Voeg de opgeslagen items opnieuw toe
items.forEach(text => {
const newDiv = document.createElement('div');
newDiv.className = 'removable';
newDiv.textContent = text;
newDiv.onclick = function() { removeElement(this); };
listContainer.insertBefore(newDiv, document.getElementById('undoButton'));
});
// Reset de undo geschiedenis omdat de pagina opnieuw is geladen
removalHistory.length = 0;
document.getElementById('undoButton').disabled = true;
}
}

function removeElement(el) {
removalHistory.push({
element: el,
previousSibling: el.previousElementSibling
});
el.remove();
document.getElementById('undoButton').disabled = false;
saveListState(); // Sla de staat op na een verwijdering
}

function undoLastRemoval() {
if (removalHistory.length > 0) {
const lastRemoval = removalHistory.pop(); // Haal de laatste verwijdering uit de geschiedenis
const elementToRestore = lastRemoval.element;
const previousSibling = lastRemoval.previousSibling;

if (previousSibling) {
previousSibling.insertAdjacentElement('afterend', elementToRestore);
} else {
listContainer.insertBefore(elementToRestore, listContainer.firstChild);
}

// Schakel de undo knop uit als er geen verwijderingen meer zijn om ongedaan te maken
document.getElementById('undoButton').disabled = removalHistory.length === 0;
saveListState(); // Sla de staat op na een undo
}
}

// Laad de opgeslagen staat wanneer de pagina geladen is
window.onload = loadListState;





Подробнее здесь: https://stackoverflow.com/questions/796 ... ed-to-loca