Hello! I’m making a To-Do list. I’m stuck on saving and keeping the text values of created elements on refresh in localStorage. I researched dozens of topics about saving newly created HTML element values to LocalStorage so that the value stays on refresh, but when I try to implement LS to my project it doesn’t seem to work. Basically, the buttons stay on refresh but not the text. Was seeing if someone can take a look at this. Thank you! https://codepen.io/bbg4/pen/NWzBwYo
Each time you add a new item to the list you are overwriting the current value of key in LS with the new item. So when you reload the page you will only know the name of the last item loaded. You can only store strings in LS. So you’ll need to come up with a way to store multiple item names in one string.
And in your load event listener you will need to parse the key string to get the list items back and then you can add them to the page. Don’t use submit() to do this.
It looks like you’re trying to save HTML Element objects to the storage… I suggest you only save the actual strings, ie “lettuce”, “apples” or whatever. When the page loads you could recreate the elements from the list stored in localStorage.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.