I’m not sure what I’m doing wrong. I think it may have something to do with how I’m pushing the result of the createListElement function to the list array, but I’m really not sure.
If you look at your appcode though, I don’t see any logic that builds the list of existing items on page load.
PS: If you are using Google Chrome, you can go to your developer tools window > Application Tab > Storage on the left Pane, then Local Storage. This will show you what’s in your local storage and you’ll see your values being added.
So you’re saying it is being added to local storage, but I need to add something that rebuilds the list if the page loads? Do you know how I would go about doing that?
EDIT:
I thought that’s what this was doing: const listJSON = localStorage.getItem('list') if (listJSON !== null) { list = JSON.parse(listJSON) }
You’ll need to loop through your existing collection of items. Since it’s an array, you can use .forEach()
If you need more help, let me , but I’d encourage you to give it a stab yourself first, this is where i would do it :
const listJSON = localStorage.getItem('list')
if (listJSON !== null) {
list = JSON.parse(listJSON)
list.forEach((x) => {
// This is where you need to call your createListElement()
// only this time you need to use the value stored, instead of the value in the input.
})
}
I’m having trouble figuring out how to call the function with the stored data. I thought It might be just to pass in the ul.textcontent to the function, but that’s giving me just empty checkboxes and lines.
Sorry, I’m a bit confused. These are the topics I’ve been learning lately, but combining them is proving pretty difficult.
var button = document.getElementById("enter"); //Store selected elements as variables
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
let list = []
const listJSON = localStorage.getItem('list')
if (listJSON !== null) {
list = listJSON.split(/\W+/).filter(e => e!=="");
}
function inputLength() {
// Check to make sure input has a value
return input.value.length;
}
function createListElement() {
var li = document.createElement("li"); //Create li element
var cb = createCheckBox();
li.appendChild(cb); //append the checkbox to the ul element
li.appendChild(document.createTextNode(input.value)); // add the value of the input variable (li element) to the document at the end of ul
ul.appendChild(li);
input.value = ""; //Return input to empty after li is added
cb.addEventListener("click", () => {
//Add event listener on click to toggle css strike through class
li.classList.toggle("strikethrough");
});
// push ul text content to list array
list.push(li.textContent.trim());
//Save list array to local storage
localStorage.setItem('list', JSON.stringify(list));
}
function createCheckBox(checked = false) {
const cb = document.createElement("input");
cb.type = "checkbox";
cb.checked = false;
cb.classList.add("checkstyle");
return cb;
}
function addListAfterClick() {
if (inputLength() > 0) {
//If input length is greater than zero, run function to create list element
createListElement();
}
}
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
//On keypress (enter), check to see if input > 0
createListElement(); // if so, create list element
}
}
button.addEventListener("click", addListAfterClick); //ON click, run the function to create a list elemeent on click
input.addEventListener("keypress", addListAfterKeypress); //On keypress enter, run the function to create list element after pressing enter
//button to remove selected elements
function removeElt() {
// create function to remove seleted items
var doneItems = document.getElementsByClassName("strikethrough"); // create var for all elements with strikethrough class
while (doneItems.length > 0) {
doneItems[0].parentNode.removeChild(doneItems[0]); //for eache strikethrough element with length > 0, remove
}
}
var remove = document.getElementById("removeItem"); //create variable for remove button
remove.addEventListener("click", removeElt); //on click for button, run function to remove selected items
that’s what you have said :
“I’m trying to get a list for a simple shopping list app to save to local storage so it isn’t lost when the page refreshes.”
Ahh I see. I should’ve been more clear. I’m able to get the array to save to local storage, but it still isn’t remaining on the page when I refresh. Though, it is saved in local storage. So I guess the real issue is getting the list to be loaded from local storage so it displays if the page is refreshed.
That’s it , make a function to be invoked when the page load.
the role of this function will be to loop through list array in the local storage and append " li "
child to the “ul” element.
for the occasion I invite you to learn React.
<body onload="myFunction()">
myFunction() {
will be similar to
createListElement function but use list array element in the locale storage
instide of input.value
}
Hi
This what you get in the locale storage : ["\nMessage1","\nMessage1Message2"]
So first of all change line 30 to : list.push(il.textContent.trim());
So now you will have an organised array: ["Message1","Message"]
I will work on this app , so check this article tomorrow, it’s 23:10 in my country.