Can't get array to save to local storage

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.

https://codepen.io/treyg/pen/PoYNNLK

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.

Any help would be greatly appreciated.

Thanks!

Adding to localstorage works just fine!

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) }

Thanks for the help!

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.
    })
}

Responding to your last post:

You are loading the data, but you aren’t building your elements back on to the page.

Thank you! I’ll look over and see if I can figure it out, then let you know.

Thanks again!

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.

Hi
try this ;

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

Still not working for some reason. Should it be?

What does this do? ```
list = listJSON.split(/\W+/).filter(e => e!=="");


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.

would that function just be something like:

window.onload = function () {
return list
}

Sorry, I’m pretty lost.

I plan to learn react in the future, I just thought I should get the fundamentals of JS down first.

 <body onload="myFunction()"> 

myFunction() {
will be similar to 
createListElement function but use list array element in the locale storage
instide of input.value

}

I’m not sure what you mean by using the list array element in the local storage. How would I call that inside the function?

Shouldn’t this be checking for the saved data?

const listJSON = localStorage.getItem(‘list’)
if (listJSON !== null) {
list = JSON.parse(listJSON)
}

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.

Ok great. Thank you very much. I will get that updated. I look forward to hearing from you.