时间戳

首页 > 解决方案 > 如何从本地存储阵列中删除特定项目？

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

问题描述

我正在构建一个待办事项列表（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"] 的数组。但是本地存储不受影响，并通过重新加载完全加载。我究竟做错了什么？提前致谢。

标签： javascript

解决方案

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);
};

推荐阅读