问题描述
我正在尝试显示已转移到本地存储的列表元素(例如,当我重新加载页面时)。
存储可以工作,但是项目不会从存储返回到列表中。似乎forEach最后都无法工作。
index.js
const input = document.querySelector("input");
const btn = document.querySelector(".addTask > button");
let itemsArray = localStorage.getItem("items")
? JSON.parse(localStorage.getItem("items"))
: [];
localStorage.setItem("items",JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem("items"));
btn.addEventListener("click",addList);
input.addEventListener("keyup",(e) => {
e.keyCode === 13 ? addList(e) : null;
});
function addList(e) {
const notCompleted = document.querySelector(".notCompleted");
const Completed = document.querySelector(".Completed");
const newLi = document.createElement("li");
newLi.contentEditable = "true";
const checkBtn = document.createElement("button");
const delBtn = document.createElement("button");
checkBtn.innerHTML = '<i class="fa fa-check"></i>';
delBtn.innerHTML = '<i class="fa fa-trash"></i>';
if (input.value !== "") {
newLi.textContent = input.value;
itemsArray.push(input.value);
localStorage.setItem("items",JSON.stringify(itemsArray));
input.value = "";
notCompleted.appendChild(newLi);
newLi.appendChild(checkBtn);
newLi.appendChild(delBtn);
}
checkBtn.addEventListener("click",function () {
const parent = this.parentNode;
parent.remove();
Completed.appendChild(parent);
checkBtn.style.display = "none";
newLi.contentEditable = "false";
});
delBtn.addEventListener("click",function () {
const parent = this.parentNode;
parent.remove();
});
}
data.forEach((item) => {
addList(item);
});
您也可以在codeandBox中观看它:
https://codesandbox.io/s/eloquent-lovelace-zm5f0
有什么主意吗?
非常感谢!
解决方法
添加到列表中时,您仅测试的是input.value而不是本地存储项。 并且您需要测试什么时候是新项目或仅从本地存储中填充。 看这个版本:
const input = document.querySelector("input");
const btn = document.querySelector(".addTask > button");
const data = JSON.parse(localStorage.getItem("items"));
btn.addEventListener("click",e => {
addList(input.value,true);
});
input.addEventListener("keyup",(e) => {
e.keyCode === 13 ? addList(input.value,true) : null;
});
data.forEach((item) => {
addList(item,false);
});
function addList(item,newItem) {
if(item && item.trim() !== ""){
const notCompleted = document.querySelector(".notCompleted");
const Completed = document.querySelector(".Completed");
const newLi = document.createElement("li");
newLi.contentEditable = "true";
const checkBtn = document.createElement("button");
const delBtn = document.createElement("button");
checkBtn.innerHTML = '<i class="fa fa-check"></i>';
delBtn.innerHTML = '<i class="fa fa-trash"></i>';
newLi.textContent = item;
if(newItem){
const itemsArray = JSON.parse(localStorage.getItem("items")) || [];
itemsArray.push(item);
localStorage.setItem("items",JSON.stringify(itemsArray));
input.value = "";
}
notCompleted.appendChild(newLi);
newLi.appendChild(checkBtn);
newLi.appendChild(delBtn);
checkBtn.addEventListener("click",function () {
const parent = this.parentNode;
parent.remove();
Completed.appendChild(parent);
checkBtn.style.display = "none";
newLi.contentEditable = "false";
});
delBtn.addEventListener("click",function () {
const parent = this.parentNode;
parent.remove();
});
}
}