Javascript 如何从本地存储阵列中删除特定项?
我正在构建一个应用程序,我一直在从本地存储中删除一个特定的项目。我觉得我有正确的代码,但它不起作用。以下是概述: 添加一些任务将在本地存储中设置这些任务。当用户单击该任务上的绿色“复选标记”时,我尝试删除该任务项: 下面是我的Javascript 如何从本地存储阵列中删除特定项?,javascript,Javascript,我正在构建一个应用程序,我一直在从本地存储中删除一个特定的项目。我觉得我有正确的代码,但它不起作用。以下是概述: 添加一些任务将在本地存储中设置这些任务。当用户单击该任务上的绿色“复选标记”时,我尝试删除该任务项: 下面是我的completeDelete函数,它将任务移动到“completed”类别中,并尝试从本地存储中删除该任务: const completeDelete = (e) => { let checks = results.querySelectorAll(".
completeDelete
函数,它将任务移动到“completed”类别中,并尝试从本地存储中删除该任务:
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:
}
以下是删除任务功能:
如果我将以下任务放入:
任务1
任务2
任务3
检查任务1是否完成,剩下的数组是[“任务2”,“任务3”]。但本地存储不受影响,并通过重新加载完全加载。我做错了什么?提前感谢。看起来“tasks”键包含一个任务数组,您可以将其正确地从解析的数组中拼接出来。但是,您需要将该拼接阵列保留回本地存储以替换旧阵列
将包含removietem
的行替换为:
localStorage.setItem('tasks', JSON.stringify(storedTasks));
parse(localStorage.getItem(“tasks”)将为您提供字符串而不是数组。使用拆分后解析,您将获得数组
const removeTaskFromLS=(任务)=>{
让storedTasks=JSON.parse(localStorage.getItem(“tasks”)).split(“,”);
const i=storedTasks.indexOf(任务);
如果(i>-1){
设newArr=storedTasks.splice(i,1);
localStorage.removietem(JSON.stringify(task));//不从本地存储中删除
console.log(任务);
}
console.log(存储任务);
};代码>没有“本地存储阵列”这类东西,正如没有“JSON阵列”这类东西一样。还有JSON,它是从localStorage提取的字符串。有一个数组,可以从JSON解析它。然后在该阵列上执行活动。然后将数组字符串化为字符串(JSON格式)。然后将该字符串存储在localStorage中。我建议使用一种方法,将数组字符串化并存储在localStorage中,另一种方法从localStorage获取字符串,对其进行解析并返回数组。这样,您就不会认为阵列位于本地存储中。这是否回答了您的问题?这是非常有帮助的,我感谢概述和游戏计划。谢谢没错!更换本地存储是有意义的。您的代码让我走上了正确的轨道,当我将其替换为localStorage
变量时,它可以正常工作,比如:localStorage.setItem(“tasks”,JSON.stringify(storedTasks))代码>@Sackadelic哎呀,完全忘了拼接是如何工作的。将更新答案。“将给你字符串而不是数组”是什么让你这么说的?OP没有提到他们的日志中有错误字符串的问题。。。
localStorage.setItem('tasks', JSON.stringify(storedTasks));