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

Question

我对 Web 开发比较陌生，现在正在部署我的第一个 Web 应用程序（To-Do-List），您可以查看它https://peaceful-stream-48694.herokuapp.com/。

现在我想添加 HTML 本地存储来保存待办事项，在初始化网站时，我得到了一个类型错误（无法读取我的待办事项错误的 null 属性）。 我知道当存储中没有项目时，我要么必须将数组设置为零，要么将它们加载到数组中以防万一（已经工作），但是我不知道在那里时该怎么做什么都没有。

我想这是范围的问题，但我只是不知道如何解决它。这是存储和加载数据的代码：

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() 中）是测试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 永远不会为空，因为它总是被初始化为一个数组）