尝试本地数据存储时出现类型错误，如何初始化我的网站？

Question

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

现在我想添加 HTML 本地存储来保存待办事项，并且在初始化时抛出类型错误（无法读取属性 of nullof my To-Do's error）网站。我知道我要么必须在存储中没有项目时将数组设置为零，要么将它们加载到数组中以防万一（已经有效），但是我不知道该怎么做没有存储空间。

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

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永远不会为null因为它总是被初始化为一个数组）

尝试本地数据存储时出现类型错误，如何初始化我的网站？

Type error while trying local data storage, how to initiaise my Website?

html

javascript

scope

initialization

local-storage