One practical suggestion is to store the list contents as a string in localStorage. Update this string whenever the list changes, and upon page load, check localStorage to see if there's a saved list.
Additionally, there are some outdated coding practices in your code:
- Avoid using
.getElementsByClassName() or .getElementsByTagName() in favor of .querySelectorAll(), which is more modern.
- Separate HTML from JavaScript for event handling rather than using inline event attributes.
- Instead of creating a text node with
createTextNode, directly set the textContent property of an element.
Note: The provided example won't work on Stack Overflow due to sandboxing but runs fine on a live page like in this Fiddle demo. Modify the list on the Fiddle, close the browser, reopen it, and see your changes restored.
Check the capitalized comments below for improvements:
// CHECK FOR A SAVED LIST IN LOCALSTORAGE ON PAGE LOAD
const theList = document.querySelector("#myUL");
let ls = localStorage.getItem("list");
if(ls){
myUL.innerHTML = ls; // Restore list from localStorage
}
// USE JAVASCRIPT FOR EVENT HANDLING, NOT INLINE HTML ATTRIBUTES LIKE 'onclick'
document.querySelector("span.addBtn").addEventListener("click", newElement);
// UPDATE: AVOID GETELEMENTSBYTAGNAME AND USE QUERYSELECTORALL FOR CONSISTENCY
document.querySelectorAll("LI").forEach(function(element){
const span = document.createElement("SPAN");
span.classList.add("close");
span.textContent = "\u00D7";
element.appendChild(span);
});
// Clicking 'close' should remove the element, not just hide it
const close = document.querySelectorAll(".close");
close.forEach(function(element){
element.addEventListener("click", function(){
this.parentElement.remove();
// UPDATE LOCAL STORAGE
localStorage.setItem("list", myUL.innerHTML);
});
});
// Add a "checked" symbol when clicking on a list item
document.querySelector('ul').addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}); // ADDITIONAL ARGUMENTS(RIGHT) CAN BE PASSED
const theInput = document.getElementById("myInput");
// Create a new list item on 'Add' button click
function newElement() {
var li = document.createElement("li");
// AVOID CREATING TEXT NODE AND APPEND, SET TEXTCONTENT DIRECTLY
if (theInput.value === '') {
alert("You must write something!");
} else {
li.textContent = theInput.value;
theList.appendChild(li);
// UPDATE LOCAL STORAGE
localStorage.setItem("list", myUL.innerHTML);
}
theInput.value = "";
const span = document.createElement("SPAN");
span.classList.add("close");
span.textContent = "\u00D7";
li.appendChild(span);
}
/* Use classes instead of inline styles for showing/hiding elements */
.hidden { display:none; }
/* CSS styling for the to-do list */
<div id="myDIV" class="to-do-header">
<h2 class="table-title">To Do</h2>
<input id="myInput" placeholder="What do you want to do?">
<span class="addBtn">Add</span>
</div>
<ul id="myUL">
<li>Wake up</li>
<li>Meeting with the team</li>
<li>Have an amazing lunch</li>
<li>Finish the project</li>
<li>Get some pizza</li>
<li>Go to sleep</li>
</ul>