title: Trying to save all generated 'li' elements to local storage using JavaScript
body: <p>This code successfully takes the contents of the form and saves it to an ordered list, 2 more functions do the same thing but instead create a timestamp. I'm trying to take every <code>li</code> element that gets generated and save it to <code>localStorage</code> when you push the save button and then repopulate it again from the local storage when you push the "load" button. I can't get it to work come hell or high water. The load button does nothing, and oddly enough the "save" button acts as a clear all and actually removes everything rather then saving it. Console log shows no errors. I have the JavaScript below and the corresponding HTML.</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>let item;
  let text;
  let newItem;
  
  function todoList() {
    item = document.getElementById("todoInput").value
    text = document.createTextNode(item)
    newItem = document.createElement("li")
    newItem.onclick = function() {
      this.parentNode.removeChild(this);
    }
    newItem.onmousemove = function() {
      this.style.backgroundColor = "orange";
    }
    newItem.onmouseout = function() {
      this.style.backgroundColor = "lightblue";
    }
    todoInput.onclick = function() {
      this.value = ""
    }
    newItem.appendChild(text)
    document.getElementById("todoList").appendChild(newItem)
  };
  
  
  function save() {
    const fieldvalue = querySelectorAll('li').value;
    localStorage.setItem('item', JSON.stringify(item));
  }
  
  function load() {
  
  
    const storedvalue = JSON.parse(localStorage.getItem(item));
  
  
    if (storedvalue) {
      document.querySelectorAll('li').value = storedvalue;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="todoForm"&gt;
    &lt;input id="todoInput" value="" size="15" placeholder="enter task here"&gt;
    &lt;button id="button" type="button" onClick="todoList()"&gt;Add task&lt;/button&gt;
    &lt;button id="save" onclick="save()"&gt;Save&lt;/button&gt;
    &lt;button id="load" onclick="load()"&gt;Load&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>