javascript - 如何从本地存储中的数组中删除对象?
问题描述
我正在创建一个看板并陷入从本地存储中删除对象的困境。我有 3 个数组用于三个看板列,它们用不同的键存储。我需要在单击时删除某些卡并更新本地存储中的阵列。
我已经可以恢复项目并在单击时删除标记,但它仍在本地存储中。这是我的工作代码:
var saveToStorage = function (data, key) {
var dataString = JSON.stringify(data);
localStorage.setItem(key, dataString);
};
var getFromStorage = function (key) {
var dataString = localStorage.getItem(key);
return JSON.parse(dataString);
};
var deleteFromList = function (task, list) {
for (var i in list) {
var currentTask = list[i];
if (tasksAreEqual(currentTask, task)){
list.splice(i, 1);
}
}
};
var tasksAreEqual = function (task1, task2) {
var task1Str = JSON.stringify(task1);
var task2Str = JSON.stringify(task2);
return task1Str === task2Str;
};
var createCard = function (task) {
var card = $("<div class = \"card\">");
var cardBody = $("<div class=\"card-body\">");
var cardHeader = $("<div class=\"d-flex justify-content-between align-items-start\">");
var cardText = $("<p class=\"card-text\">").text(task.message);
var btnRemove = $("<button type='button' id='remove' class='btn btn-outline-danger'>").text("x");
var btnNext = $("<button type='button' id='next' class='btn btn-outline-success'>").text("Next =>");
cardHeader.append(cardText, btnRemove);
cardBody.append(cardHeader, btnNext);
card.append(cardBody)
btnRemove.on("click", function(e) {
e.preventDefault();
card.remove();
});
$("#todo").append(card);
};
var todoList = getFromStorage("todo") || [];
var progressList = getFromStorage("progress") || [];
var doneList = getFromStorage("done") || [];
var btnAdd = $("#add-btn");
btnAdd.on("click", function () {
var taskMsg = $("#task-msg").val();
var task = {
message: taskMsg
};
createCard(task);
todoList.push(task);
saveToStorage(todoList, "todo");
});
$(function() {
var todoArr = getFromStorage("todo");
for (var i of todoArr) {
var task = i;
createCard(task);
}
});
解决方案
删除任务时将列表保存到 localStorage
// added "return list;"
var deleteFromList = function(task, list) {
for (var i in list) {
if (tasksAreEqual(list[i], task)) {
list.splice(i, 1);
}
}
return list;
};
btnRemove.on("click", function(e) {
e.preventDefault();
todoList = deleteFromList(task, todoList);
localStorage.setItem('todo', JSON.stringify(todoList))
card.remove();
});
$(function() {
var todoArr = getFromStorage("todo");
// prevent the error 'TypeError: todoArr is null'
if (!todoArr) return;
for (var i of todoArr) {
var task = i;
createCard(task);
}
});
推荐阅读
- google-apps-script - 为什么代码格式损坏并且是错误的,不是很有帮助
- python - 比较两个 3d Numpy 数组并返回带有索引的不匹配值,然后在没有循环的情况下重新创建它们
- python-xarray - 无法将 csv 文件中的 1d 变量添加到 Xarray 数据集 - 错误?
- python - 读取文件时如何处理 UnicodeDecodeError?
- quarkus - 如果调用错误,Quarkus REST 服务返回空响应
- javascript - 将自定义js文件添加到cshtml
- javascript - 提高获取请求加载速度
- postgresql-11 - 在 Azure Database for Postgres 的 PaaS 产品中创建超级用户?
- r - R:基于 URL 创建整洁的 df
- java - 如何设置 RSyntaxTextArea?