如何从本地存储中的数组中删除对象？答案

【问题标题】：How to delete an object from an array in local storage?如何从本地存储中的数组中删除对象？
【发布时间】：2019-05-16 09:15:05
【问题描述】：

我正在创建一个看板，但在从本地存储中删除对象时卡住了。我有 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。
您的deleteFromList 函数不正确。请参阅stackoverflow.com/questions/27871509/…，了解拼接数组中多个元素的正确方法。如果数组中的一行中有两个匹配的任务，您的函数将失败。

标签： javascript jquery ajax local-storage

【解决方案1】：

删除任务时将列表保存到 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);
  }
});

【讨论】：