Question

我正在构建一个To Do List (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的完成情况，剩下[[Task 2“，” Task 3“]数组。但是本地存储不受影响，并通过重新加载完全加载。我究竟做错了什么？预先感谢。

Answer 1

JSON.parse（localStorage.getItem（“ tasks”）））将为您提供字符串而不是Array。使用拆分后解析，您将获得数组。

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

它看起来像“任务”键包含一个任务数组，并且您似乎已将其正确地从解析的数组中拼接出来。但是，您需要将已拼接的阵列重新保存到localStorage中，以替换旧的阵列。

将包含removeItem的行替换为：

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

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

这是“删除任务”功能：

2 个答案: