Ubuntuisconfusing Ubuntuisconfusing - 17 days ago 5
Javascript Question

LocalStorage and adding li to list

I'm trying to make a small script that allows for a little notes section. This section would have an input box that allows for adding elements to the list; which will be saved in localStorage so they are not lost when I refresh or close the browser. The code I have is as follows (it's all done through JS even the html, but ignore that.)

var notes = [];
var listthings = "<h2 id=\"titlething\">Notes</h2>" +
"<ul id=\"listing\">" +
"</ul>"
"<input type=\"text\" name=\"item\" id=\"textfield\">" +
"<input type=\"submit\" id=\"submitthing\" value=\"Submit\">";

JSON.parse(localStorage.getItem('notes')) || [].forEach( function (note) {
"<li id=\"listitem\">" + notes + "</li>";
})

$('#submitthing').click(function() {
notes.push($('#textfield').val());
});

localStorage.setItem('notes', JSON.stringify(notes));


Also, how would I go about appending the latest added li between the opening and closing tag? Obviously I'd usually do it using jQuery, but this is puzzling me a little. However, only the 'Notes' loads at the top, any ideas?

Answer

Your approach is way off the mark. You don't need JSON at all (this just confuses things) and you don't need to manually create HTML.

Also, you can use an array to store the notes, but since localStorage is the storage area, so an array is redundant. Additionally, without using an array, you don't need JSON. The entire problem becomes much easier to solve.

Unfortunately, the following won't run here in this snippet editor, due to security issues, but it would do what you are asking. This fiddle shows it working: https://jsfiddle.net/Lqjwbn1r/14/

// Upon the page being ready:
window.addEventListener("DOMContentLoaded", function(){

   // Get a reference to the empty <ul> element on the page
   var list = document.getElementById("notes");

   // Loop through localStorage
   for (var i = 0; i < localStorage.length; i++){

     // Make sure that we only read the notes from local storage
     if(localStorage.key(i).indexOf("note") !== -1){
      // For each item, create a new <li> element
       var item = document.createElement("li");
       // Populate the <li> with the contents of the current 
       // localStorage item's value
       item.textContent = localStorage.getItem(localStorage.key(i));
       // Append the <li> to the page's <ul>
       list.appendChild(item);
     }
   }

   // Get references to the button and input
   var btn = document.getElementById("btnSave");
   var note = document.getElementById("txtNote");

   // Store a note count:
   var noteCount = 1;

   // When the button is clicked...
   btn.addEventListener("click", function(){
     // Get the value of the input
     var noteVal = note.value;

     // As long as the value isn't an empty string...
     if(noteVal.trim() !== ""){

       // Create the note in localStorage using the 
       // note counter so that each stored item gets
       // a unique key
       localStorage.setItem("note" + noteCount, noteVal);

       // Create a new <li>
       var lstItem = document.createElement("li");
       // Set the content of the <li>
       lstItem.textContent = noteVal;
       // Append the <li> to the <ul>
       list.appendChild(lstItem);
       // Bump up the note counter
       noteCount++;
     }
   });

});
<input type=text id=txtNote><input type=button value=Save id=btnSave>
<ul id=notes></ul>

Comments