尝试本地数据存储时键入错误，如何启动我的网站？

Question

我对 Web 开发还比较陌生，现在正在部署我的第一个 Web 应用程序（待办事项列表），您可以查看它https://peaceful-stream-48694.herokuapp.com/。现在我想添加 HTML 本地存储来保存待办事项，但在初始化网站时抛出类型错误（无法读取我的待办事项错误的属性）。我知道，当存储中没有项目时，我必须将数组设置为零，或者在有项目的情况下将它们加载到数组中（这已经有效），但是我不知道在有项目时如何执行此操作存储中没有任何内容。我想这是一个范围问题，但我只是不知道如何解决。这是存储和加载数据的代码段：function saveList() {      let str = JSON.stringify(toDoList);      localStorage.setItem("todoList", str );    }    function loadList() {      if (toDoList == null) {          toDoList = [];      } else {          let str = localStorage.getItem("todoList")          toDoList = JSON.parse(str);          displayList()      }    }    function displayList() {    if (toDoList != null) {     for(i=0; i < toDoList.length; i++) {        htmlInsert ='<div id="' + toDoList[i].id + '" class="newItem"> <input type="checkbox"> <p>' + toDoList[i].toDo +'</p> <button type="button" class="deleteButton">DELETE</button></div>';        list = document.getElementById("itemsList");        list.insertAdjacentHTML("beforeend", htmlInsert);        SetupEventListener();          }        }      }    loadList()To-Do 数组在一开始就被全局定义： let toDoList = [];我很感激任何帮助。非常感谢，很抱歉，如果这很混乱，不知道如何让它更清楚。干杯

Answer 1

你初始化let toDoList = []，然后你做的第一件事（在 loadList() 中）是 test if (toDoList == null)。这个条件永远不会被满足。

我认为你的 loadList 函数应该如下所示：

function loadList() {

     let str = localStorage.getItem("todoList"); // can be null

     toDoList = str ? JSON.parse(str) : [];

     displayList();

}

然后displayList()你可以删除，if (toDoList != null)因为这个条件总是会满足（todoList永远不会为空，因为它总是初始化为数组）