Ошибка ввода при попытке локального хранения данных, как инициировать мой сайт? - PullRequest
Новая
       13

Ошибка ввода при попытке локального хранения данных, как инициировать мой сайт?

1 голос
/ 17 марта 2020

Я относительно новичок в веб-разработке и сейчас развертываю свое первое веб-приложение (список дел), вы можете посмотреть его 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 = [];

Я ценю любую помощь. Большое спасибо и извините, если это грязно, не знал, как сделать это яснее.

Приветствия

1 Ответ

0 голосов
/ 17 марта 2020

Вы инициализируете 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 никогда не будет нулевым, потому что он всегда инициализируется как массив)

...