如何从本地存储阵列中删除特定项目？

Question

我正在构建一个待办事项列表 (codepen)应用程序，但我一直坚持从本地存储中删除特定项目。 我觉得我有正确的代码，但它不起作用。 这是一个概述：

添加一些任务在本地存储中设置这些任务。 当用户单击该任务上的绿色“复选标记”时，我试图删除该任务项：

这是我的completeDelete函数，它将任务移动到“已完成”类别，并尝试从本地存储中删除该任务：

const completeDelete = (e) => {
  let checks = results.querySelectorAll(".fa-check"); //Checkmark
  let deletes = results.querySelectorAll(".fa-times");

  //Complete Task:
  checks.forEach((check) => {
    
    if (e.target === check) {
      let closestTask = check.closest(".task"); //The task element
      let taskText = closestTask.firstElementChild.textContent; //the task text, to be removed
      
      closestTask.remove();
      
      removeTaskFromLS(taskText); //The function that removes the task:
      
   }

这是删除任务功能：

const removeTaskFromLS = (task) => {
  let storedTasks = JSON.parse(localStorage.getItem("tasks"));
  const i = storedTasks.indexOf(task);
  if (i > -1) {
    let newArr = storedTasks.splice(i, 1);
    localStorage.removeItem(JSON.stringify(task)); //not removing from Local Storage
    console.log(task);
  }
  console.log(storedTasks);
};

如果我将以下任务放入： 任务 1 任务 2 任务 3

并检查任务 1 的完成情况，我留下了一组 [“任务 2”、“任务 3”]。 但本地存储不受影响，并通过重新加载完全加载。 我究竟做错了什么？ 提前致谢。

Answer 1

JSON.parse(localStorage.getItem("tasks")) 会给你字符串而不是数组。 使用拆分后解析，您将获得数组。

 const removeTaskFromLS = (task) => { let storedTasks = JSON.parse(localStorage.getItem("tasks")).split(","); const i = storedTasks.indexOf(task); if (i > -1) { let newArr = storedTasks.splice(i, 1); localStorage.removeItem(JSON.stringify(task)); //not removing from Local Storage console.log(task); } console.log(storedTasks); };

Answer 2

看起来“tasks”键包含一个任务数组，并且您似乎正确地将它从解析的数组中拼接出来。 但是，您需要将该拼接数组保留回 localStorage 以替换旧数组。

将包含removeItem的行替换为：

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