title: How to do local storage for to-do list?
body: <p>I am currently working on making the to-do list app shown [here][1] work better. I have done things like change the font, but want to use Javascript cookies to make it so that the user's to-dos are properly saved and still there when the page is reopened. </p>
  
  <p>All I need now (which I can't seem to get the idea of how to do) is the part where 1. the browser saves the data and 2. where the browser retrieves the data.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <pre><code>&lt;body&gt;
          &lt;!--To-Do Header, where you add tasks--&gt;
          &lt;div id="myDIV" class="header"&gt;
              &lt;!--Change one: Make to-do list name different--&gt;
              &lt;h2&gt;To-Do&lt;/h2&gt;
              &lt;input type="text" id="myInput" placeholder="Title..." style="padding-bottom: 20px;"&gt;
              &lt;span onclick="newElement();" class="addBtn"&gt;Add&lt;/span&gt;
          &lt;/div&gt;
          &lt;!--To-do list--&gt;
          &lt;ul id="myUL"&gt;
  
          &lt;/ul&gt;
  </code></pre>
  
  <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>var myNodelist = document.getElementsByTagName("LI");
  var i;
  for (i = 0; i &lt; myNodelist.length; i++) {
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    myNodelist[i].appendChild(span);
  }
  // Click on a close button to hide the current list item
  var close = document.getElementsByClassName("close");
  var i;
  for (i = 0; i &lt; close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    };
  }
  // Add a "checked" symbol when clicking on a list item
  var list = document.querySelector('ul');
  list.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'LI') {
      ev.target.classList.toggle('checked');
    }
  }, false);
  // Create a new list item when clicking on the "Add" button
  function newElement() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
      alert("You must write something to create a task.");
    } else {
      document.getElementById("myUL").appendChild(li);
    }
    document.getElementById("myInput").value = "";
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);
    for (i = 0; i &lt; close.length; i++) {
      close[i].onclick = function() {
        var div = this.parentElement;
        div.style.display = "none";
      };
    }
  }</code></pre>
  </div>
  </div>
  </p>