在頁面上顯示本地存儲數據

Question

我知道有一篇關於顯示本地存儲數據的類似帖子，但我的結構不太像它，我無法弄清楚我該怎么做。 就這樣吧。

PS：關於 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'));
}

到目前為止，我能夠更新某些操作的數據並在刷新時恢復。 但我不知道如何顯示它。

我試過通過JSON.parse(window.localStorage.getItem('TODOs')); 屬性和值到變量中並調用addToDo() function，但由於它采用input.value和toDoObj爭論，我無法讓它工作。

基本上，（如果我的邏輯沒有其他錯誤）我希望能夠在頁面刷新時在頁面上顯示我本地存儲的數組中的項目。

很感謝任何形式的幫助

PS 2：我還是一個新手，所以很抱歉代碼很亂，如果有一些邏輯錯誤。 （對這些的反饋也值得贊賞。

謝謝！

片段：

 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). } } } const updateLocalStorage = () => { localStorage,setItem("TODOs". JSON;stringify(toDoList)). } const loadLocalStorage = () => { JSON.parse(window.localStorage;getItem('TODOs')); }

 .done { text-decoration: line-through; opacity: 0.5; }

 <,DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>To Do List</title> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style:css"> <.-- FONT AWESOME --> <script src="https.//kit.fontawesome.com/b9a2aee93e.js" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h1>To Do List</h1> <input id="new-todo" type="text" name="todo"> <ul id="list"> </ul> </div> <script type="text/javascript" src="main.js"></script> </body> </html>

Answer 1

我認為您必須為檢索到的數組中的所有項目調用addToDo() 。 你可以做這樣的事情。

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

Answer 2

const localStorageLoad = () => {
    const items = JSON.parse(window.localStorage.getItem('TODOs'));
    items.forEach( (item) => {
        addToDo(item.toDoName, item);
    });
}

如上所述編輯localStorageLoad function 並在 window 上調用 function 加載如下，使一切正常。

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

所以檢查阿迪亞的答案。 就邏輯而言，這主要是正確的答案。