title: After setting localstorage item, can't show it on screen
body: <p>I basicly add my input values to <code>vals</code> array.</p>
  
  <p>Then save the array to localStorage: <code>localStorage.setItem('mylist', JSON.stringify(vals));</code></p>
  
  <p>After that, i show values from <code>vals</code> array.</p>
  
  <p>It saves the values to localStorage but  when i refresh, <strong>values doesn't show up on screen with my dynamicly created li elements.</strong></p>
  
  <p>Why?</p>
  
  <p><em>Note: I want to use localstorage with JSON.</em></p>
  
  <p><strong><a href="https://jsfiddle.net/r2n9a66z/" rel="nofollow noreferrer">JSFIDDLE</a></strong></p>
  
  <pre><code>var input = document.getElementById("input");
  var box = document.querySelector(".box");
  
  var vals = [];
  var li;
  var list;
  
  input.addEventListener("keyup", function(e) {
    var val = e.target.value;
  
    if (e.which == 13) {
      box.innerHTML = "";
      input.value = " ";
  
      // Push input value array
      vals.push(val);
      localStorage.setItem('mylist', JSON.stringify(vals));
  
      // Loop input values
      list = vals.map(function(item, index) {
        li = document.createElement("LI");
        box.appendChild(li);
        li.innerHTML = JSON.parse(localStorage.getItem('mylist'))[index];
      });
    }
  
  }, false);
  
  box.innerHTML = list;
  </code></pre>