为什么要永远调用函数myFunction,所以LIST会更新,如控制台中所示,但是本地存储仅显示LIST的第一个元素。 // ? 这是创建一个待办事项列表,其中我将元素(按钮和p)添加到节点元素并将其附加到列表中。 如何将列表存储在本地存储中?
let list = document.getElementById("myList");
let input = document.getElementById("input");
let id = 0;
let LIST = [];
const month = ["Jan", "Feb", "Mar", "April", "May", "Jun", "July", "Aug",
"Sept", "Oct", "Nov", "Dec"];
let today = new Date();
document.getElementById("date").innerHTML = today.getDate() + " " +
month[today.getMonth()] + " " + today.getFullYear();
document.addEventListener("keyup", function () {
if (event.keyCode == 13) {
if (input.value) {
myFunction();
}
}
});
function myFunction() {
if (input.value) {
var remove = document.createElement('button');
remove.classList.add("remove");
remove.innerHTML += `<i class="fa fa-trash"></i>`;
remove.addEventListener("click", function () {
if (this.className == "remove") {
this.parentNode.parentNode.removeChild(this.parentNode);
}
});
let complete = document.createElement("button");
complete.classList.add("complete");
complete.innerHTML += `<i class="fa fa-circle-thin"></i>`;
complete.addEventListener("click", function () {
if (this.className == "complete") {
complete.innerHTML = "";
complete.innerHTML += `<i class="fa fa-check-circle"</i>`;
complete.parentNode.firstChild.style.textDecoration = "line-
through";
complete.classList.remove("complete");
complete.classList.add("done");
}
else if (this.className == "done") {
complete.innerHTML = "";
complete.innerHTML += `<i class="fa fa-circle-thin"></i>`;
complete.parentNode.firstChild.style.textDecoration = "";
complete.classList.remove("done");
complete.classList.add("complete");
}
});
var node = document.createElement("LI");
var text = document.createElement("span");
text.innerText = input.value;
node.appendChild(text);
node.appendChild(complete);
list.appendChild(node);
node.appendChild(remove);
LIST.push(node.innerHTML);
localStorage.setItem("hey", JSON.stringify(LIST));
input.value = "";
}
}
function removeall() {
localStorage.clear();
document.getElementById("myList").innerHTML = "";
}