我知道也有一篇关于显示本地存储数据的类似文章，但是我的结构不太像它，因此我无法弄清楚该怎么做。所以就到这里。
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()功能，但由于它采取input.value和toDoObjarguements，我无法得到它的工作。
基本上，（如果我在逻辑上没有其他错误）我希望能够在刷新页面时在页面上的本地存储数组上显示项目。
很感谢任何形式的帮助
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>我认为您必须调用addToDo()检索到的数组中的所有项目。你可以做这样的事情。
const items = JSON.parse(window.localStorage.getItem('TODOs'));
items.forEach((item) => {
addTodo(item)
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句