如何通过javascript使用本地存储保存待办事项列表数据

Question

这里我只使用javascript。

HTML：

<section class="notes-section">
            <div class="layout clearfix">
                <input id="user_input" name="user_input" placeholder="Enter your new note" type="text" />
                <button value="Add" id="add" onclick="addNotes()">New</button>
                <ul id="note_List" class="notes-block"></ul>
            </div>
</section> 

JavaScript的：

<script>
function addNotes() {
    var input = document.getElementById('user_input').value;
    if (input == "") {
        window.alert("You must enter a value in the New Task field.");
    }
    else {
        var noteList = document.getElementById('note_List');
         noteList.innerHTML += "<li><span>" + input + "</span><button onclick='this.parentNode.parentNode.removeChild(this.parentNode)' class='delete'>Delete</button> <button class='edit' onclick='this.previousElementSibling.previousElementSibling.contentEditable = true;' >Edit</button></li>";

    }
}
</script>

我正在分享小提琴链接：https://jsfiddle.net/o2mLgd67/ 如果任何人都可以更新代码，那么它将会有所帮助。

我试过以下代码：

(function() {

  var demo = document.querySelector('.notes-block');
  function supportsLocalStorage() {
    return typeof(Storage)!== 'undefined';
  }
  if (!supportsLocalStorage()) {
    demo.value = 'No HTML5 localStorage support, soz.';

  } else {

      setInterval(function() {
        localStorage.setItem('autosave', demo.value);
      }, 1000);


    if (localStorage.getItem('autosave')) {
      demo.value = localStorage.getItem('autosave');
      alert("hi");
    }

  }

})();

但它没有帮助我。