Javascript 在第页上显示本地存储数据

我知道有一篇关于显示本地存储数据的类似文章，但我的结构与之不太一样，我也不知道如何才能做到这一点。就这样

附言：关于ES6可能会有一些语法/逻辑错误（我仍在努力适应它）

这是我的JS文件：

const list = document.getElementById("list");
const input = document.getElementById("new-todo");
let toDoList = [];
let toDoObj = {
    toDoName: String,
    toDoDone: Boolean,
    toDoID: 0,
}



input.addEventListener("keyup", e => {
    if (e.keyCode === 13) {
        addToDo(input.value, toDoObj);
        updateLocalStorage();
    }
});

list.addEventListener("click", e => {
    ulComp = e.target;
    if(ulComp.id === "dltBtn") {
        removeToDo(ulComp, toDoList);
        updateLocalStorage();
    }
    else if (ulComp.classList.contains("todo-text")) {
        doneToDo(ulComp, toDoList);
        updateLocalStorage();
    }
});


const addToDo = (newToDo, obj) => {
    if(input.value) {
        const toDoItem = `<li id="item"><i class="fas fa-trash-alt" data-text="${newToDo}" id="dltBtn"></i><span data-text="${newToDo}" class="todo-text">${newToDo}</span> </li>`;
        list.insertAdjacentHTML("afterbegin", toDoItem );
        obj = {
            toDoName: newToDo,
            toDoDone: false,
            toDoID: toDoObj.toDoID++
        };
        toDoList.push(obj);
        input.value = "";
    }
    else {
        alert("Please Type In A To-Do!");
    }
}
const doneToDo = (item, list) => {
    item.classList.toggle("done");
    for(let i = 0; i < list.length; i++) {
        if (list[i].toDoName === item.getAttribute("data-text") && item.classList.contains("done")) {
            list[i].toDoDone = true;
        }
        else if (list[i].toDoName === item.getAttribute("data-text")) {
            list[i].toDoDone = false;
        }
    }
}

const removeToDo = (item, list) => {
    for (let i = 0; i < list.length;i++) {  
        if (list[i].toDoName === item.getAttribute("data-text")) {
            item.parentElement.remove();
            list.splice(i,1);
            console.log(list);
        }
    }
}

const updateLocalStorage = () => {
    localStorage.setItem("TODOs", JSON.stringify(toDoList));
}

const loadLocalStorage = () => {
    JSON.parse(window.localStorage.getItem('TODOs'));
}

。完成{
文字装饰：线条贯通；
不透明度：0.5；
}

待办事项清单
待办事项清单

我认为您必须为检索到的数组中的所有项调用

addToDo（）

。你可以这样做

    const items = JSON.parse(window.localStorage.getItem('TODOs'));
    items.forEach((item) => {
        addTodo(item)
    });

如上所述编辑

localStorageLoad

函数，并在窗口加载时调用该函数，使一切工作正常

window.addEventListener("load", (e) => {
    localStorageLoad();
});

---

所以，检查阿迪蒂亚的答案。就逻辑而言，这基本上是正确的答案。

请发布您的html或工作演示，以便我们可以检查问题出在哪里。我在发布前添加了一个片段，但在下一次编辑时忘记了。在您的

addToDo（）

函数中，检查

if（newToDo）

而不是

if（input.value）

谢谢您的回答和建议。我应该在哪里调用函数

loadLocalStorage（）

函数？当我在全局作用域上执行此操作时，我无法在初始化错误之前访问它，并且如果我在定义它之后调用它，我将得到其他函数的未定义错误。抱歉，我对本地存储相当陌生。事实上，这是我第一次使用它。我能够让它工作。有关完整功能，请参见我的答案。这个答案在逻辑上是正确的。

window.addEventListener("load", (e) => {
    localStorageLoad();
});