Question

我知道关于显示本地存储数据的帖子也很相似，但是我的结构不太像它，因此我无法弄清楚该怎么做。这样就可以了。

P.S：关于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()函数，但是由于它需要input.value和toDoObj的争论，所以我无法使它工作。

基本上，（如果我在逻辑上没有其他错误）我希望能够在刷新页面时在页面上的本地存储数组中显示项目。

非常感谢您的帮助

P.S 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函数，并按如下所示在窗口加载时调用该函数，使一切正常运行。

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

因此，请检查Aditya的答案。就逻辑而言，这基本上是正确的答案。

在页面上显示本地存储数据

2 个答案: