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

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() {&nbsp; &nbsp; &nbsp;let str = localStorage.getItem("todoList"); // can be null&nbsp; &nbsp; &nbsp;toDoList = str ? JSON.parse(str) : [];&nbsp; &nbsp; &nbsp;displayList();}然后displayList()你可以删除，if (toDoList != null)因为这个条件总是会满足（todoList永远不会为空，因为它总是初始化为数组）