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

debugcn 发表于 Dev

琼斯飞行员

我是Web开发的新手，现在正在部署我的第一个Web App（任务清单），您可以查看它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()

待办事项数组是在开始时全局定义的： let toDoList = [];

感谢您的帮助。非常感谢，如果这是一团糟，很抱歉，不知道如何使其更清晰。

干杯

杰里米·蒂尔

初始化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永远不会为null，因为它始终被初始化为数组）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。