当我按删除任务(x 符号)时遇到问题,它会从 UI 中删除,然后去搜索本地存储以从那里删除它。从存储中删除的功能工作正常,我通过控制台检查了它比较 UI 中的任务文本和来自本地存储的任务数组中的任务文本的唯一问题:它们是相同的,都是字符串,但它仍然没有不起作用,当您重新加载页面时,任务仍在页面上,并且没有从本地存储中删除
https://codepen.io/mokai2008/pen/jdxeXJ
// When click delete the task
taskList.addEventListener('click', removeTask);
function removeTask(e) {
if(e.target.classList.contains('remove')) {
if(confirm('Are You Sure?')) {
e.target.parentElement.remove();
// Remove from LS
removeTaskFromLocalStorage(e.target.parentElement);
}
}
}
// Remove from LS
function removeTaskFromLocalStorage(taskItem) {
let tasks;
if(localStorage.getItem('tasks') === null){
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem('tasks'));
}
tasks.forEach(function(task, index){
if(taskItem.textContent === task){
tasks.splice(index, 1);
}
});
localStorage.setItem('tasks', JSON.stringify(tasks));
}
最佳答案
您的解决方案存在几个问题。
直接回答你的问题,它不删除的原因是当你在 addTask
函数中将任务添加到 HTML 时,元素的 textContent
最终成为'task '
(注意末尾的额外空格)。
快速修复:
if(taskItem.textContent.trimEnd() === task){
tasks.splice(index, 1);
}
下一个问题是您正在拼接正在迭代的数组!这会导致索引困惑,并且您将跳过拼接后的下一项。
例如:
let x = [1,2,3,4,5];
x.forEach(function(item, index) {
if (item === 3) {
x.splice(index, 1);
}
console.log(item); // prints: 1, 2, 3, 5
});
解决这个问题的最简单方法:
tasks = tasks.filter((task, index) => taskItem.textContent.trimEnd() !== task);
关于javascript - 为什么任务没有从本地存储中删除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54641398/