如何从LocalStorage中只删除选定的项？
如何从LocalStorage中只删除选定的项？
提问于 2022-09-05 16:50:29
如何从LocalStorage中只删除选定的项？
我创建了一个按钮来取消任务。但是当我单击它时，所有其他任务都会被删除。
const tasks = [];
btn.addEventListener("click", addTask);
function createLi(value) {
tasks.push(value);
let li = document.createElement("li");
li.appendChild(document.createTextNode(value));
container.appendChild(li);
let deleteButton = document.createElement("button");
deleteButton.innerText = "\u00D7";
li.appendChild(deleteButton);
deleteButton.addEventListener("click", deleteTask);
}
// ADD A TASK
function addTask() {
createLi(input.value);
localStorage.setItem("task", JSON.stringify(tasks));
}
function deleteTask() {
localStorage.removeItem("task");
}
JSON.parse(localStorage.getItem("task")).forEach((task) => {
createLi(task);
});<input type="text" id="input">
<button id="btn">SEND</button>
<ul id="container">
</ul>
Stack Overflow用户
回答已采纳
发布于 2022-09-05 17:04:50
LocalStorage将密钥-值对存储在存储对象中，因此当您调用setItem()时，它类似于使用key = task更新密钥值对。把它想成：
localStorage = { "task": "[task1, task2, task3, ...]" }但是当您调用removeItem()时，它会从LocalStorage中移除整个键值对，所以当您稍后调用localStorage.getItem("task")时，它将返回一个空值。
deleteTask()函数需要做的仍然是调用setItem()，但是更新写入LocalStorage的任务数组，因此它不包含要删除的任务。类似于：
function deleteTask(taskToDelete) {
const tasks = localStorage.getItem("task");
const updatedTasks = task.filter(task => task != taskToDelete);
localStorage.setItem("task", updatedTasks);
}您仍然希望在localStorage.getItem("task")中返回一个值，但返回的值取决于已添加或删除的任务。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73612517
复制相关文章
相似问题
腾讯云开发者
