如何通过javascript将待办事项列表数据保存到本地存储中

How to save todo list data with local storage through javascript

本文关键字：保存 数据 存储 列表 javascript 何通过      更新时间：2023-09-26

这里我只使用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");
    }
  }
})();

但这对我没有帮助。

在设置值之前，无法从localStorage获取值。

setInterval是异步进程，所以在1000ms后调用"set"语句，但立即调用get。你必须改变它，尝试：

       setInterval(function() {
localStorage.setItem('autosave', demo.value);
   if (localStorage.getItem('autosave')) {
      demo.value = localStorage.getItem('autosave');
       alert("hi");
   }
     }, 1000);

更新：

好的，我纠正您的jsFiddle使用"demo.innerHTML"而不是"demo.value"，效果很好！！

请参阅：https://jsfiddle.net/o2mLgd67/7/

  setTimeout(function() {
    localStorage.setItem('autosave', demo.innerHTML);
       demo.innerHTML = "";
         setTimeout(function() {
     if (localStorage.getItem('autosave')) {
  demo.innerHTML = localStorage.getItem('autosave');
  alert(demo.innerHTML);
} }, 1000);
  }, 1000);
相关文章：