Javascript 如何从本地存储中删除与另一个值具有相同键的单个值？

我正在创建一个待办事项列表，并按照一个步骤将项目保存到本地存储，但现在我很难理解如何获取代码以从本地存储中删除项目。当我学习本教程时，添加到本地存储的所有项都具有相同的键。 以下是我的一些代码： Html:

我的清单应用程序
创建我的应用程序
创建任务

完成Sprint One
完成Css
完成冲刺2

JavaScript:

//removing tasks from list
    var myList = document.getElementsByTagName('li');
    var index;
    for (index = 0; index < myList.length; index++){
      var aSpanTag = document.createElement("SPAN");
      var someTxt = document.createTextNode("\u00D7");
      aSpanTag.className = "close";
      aSpanTag.appendChild(someTxt);
      myList[index].appendChild(aSpanTag);
    }
    
    var closeButton = document.getElementsByClassName("close");
    
    for (i = 0; i < closeButton.length; i++){
      closeButton[i].addEventListener('click', function(){
        var theDiv = this.parentElement;
        theDiv.style.display = "none";
      })
    }

    //Adding tasks to localStorage
    
        const submit = document.querySelector('.create-button');
        const taskList = document.querySelector('.the-ul-list');
        const taskInput = document.querySelector('.the-input-class');
        
        function template(data){
          taskList.insertAdjacentHTML("beforeend", `
          <ul id="the-ul" class="the-ul-list">
            <li id="the-li" class="task">${data.task}<span class ="close">x</span></li>
          </ul>`);
        
        }
        
        
        function appendTask(event){
          const data = {
            task: taskInput.value,
          }
          event.preventDefault();
          //if comment value is smaller than 1, submit will not work
          if (taskInput.value.length < 1) return;
          template(data);
          taskInput.value ="";
          // saving the tasks to localStorage
          localStorage.setItem('taskItems', taskList.innerHTML)
        }
        submit.addEventListener('click', appendTask, false);
        
        const saved = localStorage.getItem('taskItems');
        if (saved) {
          taskList.innerHTML = saved;
        }

//从列表中删除任务
var myList=document.getElementsByTagName（'li'）；
var指数；
对于（索引=0；索引
${data.task}x
`）；
}
函数追加任务（事件）{
常数数据={
任务：taskInput.value，
}
event.preventDefault（）；
//如果注释值小于1，则提交将不起作用
if（taskInput.value.length<1）返回；
模板（数据）；
taskInput.value=“”；
//将任务保存到本地存储
localStorage.setItem（'taskItems'，taskList.innerHTML）
}
submit.addEventListener（'click'，appendTask，false）；
const saved=localStorage.getItem（'taskItems'）；
如果（已保存）{
taskList.innerHTML=已保存；
}

如果格式不好，我很抱歉，这是我第一次在这里问问题

---

编辑：有人说我应该将其更改为数组，我将如何使用当前的代码执行此操作？

您可以使用数组从本地存储中检索数组，然后解析数据并推送新元素

let saved = localStorage.getItem('taskItems');
if(!saved) {
//checking if we are doing it for the firsttime
const data =  [taskList.innerHTML];
localStorage.setItem('tasksItems',JSON.stringify(data));
}
else {
 const data = JSON.parse(saved);
  saved.push(taskList.innerHTML);
  localStorage.setItem('tasksItems',JSON.stringify(data));
}

---

本地存储中不能有两个具有相同密钥的项。每个键只有一个与之关联的值。如果该值是一个数组，那么它仍然是一个数组，其中可能包含多个元素。现在您希望从localStorage中删除任务，该任务已被用户关闭？？它似乎可以工作，但我现在在DevTools中遇到了以下错误：Uncaught SyntaxError:Unexpected token<在JSON中的位置9处，在JSON.parse（）当我点击该错误时，它会将我带到文档顶部的以下部分：编辑：在我完成评论之前意外提交try this data={tasks:tasklist.innerHTML}localStorage.setItem（'tasksItems'，data）；我现在有一个错误，读取Uncaught SyntaxError:Unexpected token'。它集中在您建议我更改的行上

let saved = localStorage.getItem('taskItems');
if(!saved) {
//checking if we are doing it for the firsttime
const data =  [taskList.innerHTML];
localStorage.setItem('tasksItems',JSON.stringify(data));
}
else {
 const data = JSON.parse(saved);
  saved.push(taskList.innerHTML);
  localStorage.setItem('tasksItems',JSON.stringify(data));
}