javascript - 为什么任务没有从本地存储中删除？

Question

当我按删除任务(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));
  }

Answer 1

您的解决方案存在几个问题。

直接回答你的问题，它不删除的原因是当你在 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);