Question

我正在尝试创建待办事项列表并将其存储在本地存储中，以便将其保存。我在启动时运行get（）和list（）函数，将其从localStorage中拉出并列出。问题是for循环不会在list（）函数中运行。一旦我放入一个新项目并运行newItem（）函数，它就会退出localStorage并列出所有内容。有什么想法吗？

get();
list();
function Todo(name){
    this.name = name;
    this.completed = false;
}

function newItem(){
    var t = new Todo(document.getElementById("newItem").value)
    items.push(t)
    save();
    console.log(items)

}

function save(){
    var save = JSON.stringify(items)
    localStorage.setItem("localsave", save)
    list();
}

function list(name){
    var html = "";
    console.log(items)
    for(var i in items){
     var todo = items[i];
     var name = todo.name
     var completed = todo.completed;
     html += "<li>"+name+""+completed+"</li>"
    }
    $("#ul").html(html);
}
function get(){
    var temp = localStorage.getItem("localsave")
    items = JSON.parse(temp)


}

如果有人对此感兴趣，那么HTML文档就是这样

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script src="todo.js"></script>
<form method="post" action="javascript:newItem()">
    <input type="text" id="newItem" name="newItem" placeholder="New item">

</form>
<ul id="ul">

</ul>

Answer 1

您的代码首先运行Java脚本代码，然后呈现HTMl元素。

在呈现具有“ ul” id的控件之前，该行已首先执行，因此它已经从存储中获取了数据，但是无法在未呈现的“ ui”中查看它们。

$("#ul").html(html);

因此您的代码应在渲染HTML元素后调用todo.js：

    <html>
    <body>

    <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"></script>   
       <form method="post" action="javascript:newItem()">
        <input type="text" id="newItem" name="newItem" placeholder="New item">

    </form>
    <ul id="ul">

</ul>

    <script src="todo.js"></script>

    </body>

    </html>

Answer 2

正如@Jonas Wilms所说，您需要处理store中的null值。您的get函数需要如下所示。

 get() {
    var temp = localStorage.getItem("localsave")
    if (temp) {
      items = JSON.parse(temp)
    }
    else {
      items = [];
    }
  }

Answer 3

我想这就是你想要的。

list();

function Todo(name){
    this.name = name;
    this.completed = false;
}

function newItem(){
    var items = get();
    var t = new Todo(document.getElementById("newItem").value)
    items.push(t);
    save(items);
    console.log('saving items', items);
}

function save(items){
    var save = JSON.stringify(items)
    localStorage.setItem("localsave", save)
    list();
}

function list(name){
    var html = "";
    var items = get();
    if(items.length > 0){
     for(var i in items){
      var todo = items[i];
      var name = todo.name;
      var completed = todo.completed;
      html += "<li>"+name+""+completed+"</li>"
     }
     $("#ul").html(html);
    }
    console.log('listing items', items);
}

function get(){
    var temp = localStorage.getItem("localsave");
    if(temp){
      return JSON.parse(temp);
    }else{
      return [];
    }
}

for循环不会在javascript启动时运行

3 个答案: