Когда вы добавляете элемент на страницу, в определенный момент вы делаете это
task = document.createTextNode(addField);
Поскольку task является глобальной переменной (вы объявили ее сверху), вы затеняете ее созданным TextNode, так что когда вы затем вызываете toLocal и делаете
forTask = task.innerHTML;
task не имеет атрибута innerHTML, поэтому возвращает undefined.
Кроме того, по какой-то причине вы снова набираете toLocal в конце newElement. Это не проблема , но это то, о чем вы можете подумать. Я не уверен, что ты этого хочешь.
@ TakayashiHarano дал пару советов, чтобы решить эту проблему, но я не уверен, что вам нужно просто иметь последний элемент в локальном хранилище. Поэтому я бы переписал toLocal, чтобы он взял строку (текст элемента) в качестве входных данных, записал ее в конец массива JSON (уже заполненного тем, что было в локальном хранилище ранее) и поместил массив обратно в локальное хранилище.
function toLocal(toAdd) {
let storage = localStorage.getItem('forLocal');
if (storage === null) {
storage = [];
} else {
storage = JSON.parse(storage);
}
storage.push(toAdd);
localStorage.setItem('forLocal', JSON.stringify(storage));
}
Затем вы должны изменить часть кода, которая читает локальное хранилище (ту, что в конце), чтобы в основном имитировать добавление нового элемента, как вы делали бы это при создании новой задачи, но для каждого элемента в анализируемом JSON из локального хранилища.
Если честно, ваш код нуждается в хорошей дозе переписывания для достижения этого, поэтому я просто оставлю вас с этим в качестве упражнения.