javascript - 如何从字符串中删除 localStorage 值，而不对该值进行硬编码？

Question

我正在摆弄 JS 和 localStorage，创建一个待办事项列表。单击列表中的某个项目时，它会更改其 CSS 类，并且应该从 localStorage 中删除它。项目的值(value)是由用户决定的，所以我不能在

中进行硬编码

localStorage.removeItem('Do the dishes');

例如。

我尝试过这样做:

localStorage.removeItem(ev.target.innerText);

(下面是较长的版本)。它不会给我错误，但它也不会从 localStorage 中删除该项目。

var taskList = document.querySelector('ul');

taskList.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');

    let tasks;
    if(localStorage.getItem('tasks') === null ){

        tasks = [];

    }
    else {
        tasks = JSON.parse(localStorage.getItem('tasks'));  
        console.log("TaskList Is Not empty"); 

        tasks.forEach(function(task, index){
            if(ev.target.innerText === task){
                localStorage.removeItem(ev.target.innerText);
                console.log("Removed"); 
            } 
            else{
                console.log("Else Executed");
            }
        }

任务全部添加到名为“Tasks”的 localStorage 键中:

function storeTaskInLocalStorage(newTask){
let tasks;
if(localStorage.getItem('tasks') === null ){
    tasks = [];
}else{
    tasks = JSON.parse(localStorage.getItem('tasks'));
}
tasks.push(newTask);
localStorage.setItem('tasks', JSON.stringify(tasks));
}

如上所述，该项目应该从 localStorage 中消失，但事实并非如此。这可能是我的代码中的错误，但我似乎无法在互联网上找到任何其他方法，因此任何帮助将不胜感激!

如果需要完整的项目来进行故障排除或其他任何事情，请告诉我，我可以将其上传到 codePen 或其他地方:)

Answer 1

这应该可以完成工作:

var taskList = document.querySelector('ul');

taskList.addEventListener('click', function (ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');

    let tasks;
    if (localStorage.getItem('tasks') === null) {

      tasks = [];

    } else {
      tasks = JSON.parse(localStorage.getItem('tasks'));
      console.log('TaskList Is Not empty');

      const taskId = tasks.indexOf(ev.target.innerText);

      if (taskId !== -1) {
        tasks.splice(taskId, 1);

        localStorage.setItem('tasks', JSON.stringify(tasks));
      }
    }
  }
});

我希望 tasks 是一个字符串数组，您可以在其中存储待办事项 - 如果不是，请告诉我，以便我调整代码。