title: How to add more items to local storage?
body: <p>I am just starting with programming and I am playing around with this todo list. Now I want to add my todo items to local storage.</p>
  
  <p>But everytime I add a new item to the list I overwrite the one and only to do item.</p>
  
  <p>How do I solve this?</p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var data = JSON.parse(localStorage.getItem("todoData"));
  
    for (var i = 0; i &lt; localStorage.length; i++) {
      $('#thingsTodo').append('&lt;div class="section"&gt;' +
        '&lt;li id="listItem" class="blue-text text-darken-2 tooltip"&gt;' + data + '&lt;span class="tooltiptext"&gt;Click to edit&lt;/span&gt;&lt;/li&gt;' +
        '&lt;i class="small material-icons deleteThisItem"&gt;delete&lt;/i&gt;' +
        '&lt;div class="divider"&gt;&lt;/div&gt;');
    }
  
    $('#addItem').on('click', addItemToList);
    $('#thingsTodo').on('click', '.deleteThisItem', deleteItem);
    $('#thingsTodo').on('click', '#listItem', editItem);
  
    function addItemToList() {
      var newItem = {
        value: $('#inputField').val()
      };
  
      if (newItem.value !== '') {
  
        localStorage.setItem("todoData", JSON.stringify(newItem.value));
  
        $('#thingsTodo').append('&lt;div class="section"&gt;' +
          '&lt;li id="listItem" class="blue-text text-darken-2 tooltip"&gt;' + newItem.value + '&lt;span class="tooltiptext"&gt;Click to edit&lt;/span&gt;&lt;/li&gt;' +
          '&lt;i class="small material-icons deleteThisItem"&gt;delete&lt;/i&gt;' +
          '&lt;div class="divider"&gt;&lt;/div&gt;');
        $('#inputField').val("");
      } else {
        alert("Please make sure you enter something before clicking the button");
      }
    }
  
    function deleteItem() {
      $(this).closest('.section').remove();
      $(this).closest('.divider').remove();
    }
  
    function editItem() {
      var newTodoInput = {
        newValue: prompt("Please edit your todo item")
      };
  
  
      if (typeof newTodoInput.newValue !== 'object') {
        if (newTodoInput.newValue !== "") {
  
          $(this).replaceWith('&lt;li id="listItem" class="blue-text text-darken-2 tooltip"&gt;' + newTodoInput.newValue + '&lt;span class="tooltiptext"&gt;Click to edit&lt;/span&gt;&lt;/li&gt;');
        }
  
      } else {
        alert("Please make sure you enter something before clicking the button");
      }
  
  
    }
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>If possible please also show me how to save it when I edit a list item.</p>