使用 buttonclick 从本地存储中删除表项

Question

这是我第一次在 Stack Overflow 上提问，所以我希望我能提供有关我的问题的足够信息。 我是编码的初学者。

对于我正在参加的课程中的练习，我必须构建一个 Web 应用程序。 我正在尝试构建一个网络应用程序，用户可以在其中跟踪他的收入和支出。 我正处于该应用程序能够增加收入/支出并将该数据用于进一步目的的地步，但现在我在删除数据时遇到了问题。

数据在本地存储中的存储方式是这样的（通过 onclick 函数）：`

const addBtn = document.getElementById('submit-button');
addBtn.onclick = function addTransaction() {
    let amountNow = amountInput.value;
    let inOutNow = inOutInput.value;
    let categoryNow = categoryInput.value;
    let transactions = localStorage.getItem('transactions');
    let transactionObj = [];

    if (transactions) {
        transactionObj = JSON.parse(transactions);
    }

    if (amountNow == "" || amountNow == 0 || inOutNow == "invalid" || categoryNow == "invalid") {
        alert('This input is not valid. Please check if the fields are filled in correctly.');
    } else {
        transactionObj.push({ "amount": amountNow, "inOut": inOutNow, "category": categoryNow, "month": month, "year": year });
        localStorage.setItem('transactions', JSON.stringify(transactionObj));
    }
}

` 通过像这样添加数据，我得到了我想要的结果，一个包含对象的数组。 该数组通过 foreach 循环显示在我的页面上的表格中。 该表的每一行都有一个删除按钮。 当用户单击其中一个删除按钮时，该特定行及其特定数据必须从本地存储中删除，但我不知道如何执行此操作。

我希望你们能在这里帮助我。

我试图通过事件侦听器从本地存储中删除数据，但我没有设法定位到特定数据。 我设法从表中删除了一行，但在页面刷新时，由于 foreach 循环，该行重新出现。 数据并没有以这种方式从本地存储中删除。

Answer 1

我不确定我是否完全理解这里发生的事情，但从看起来你似乎是在将一个对象添加到数组然后将其放入本地存储中来看，我早些时候在尝试删除一个对象时遇到了问题来自数组的对象，这是我找到的解决方案：

如果你知道它的索引是什么（一个例子是当你在数组中查找一些东西时你会做array[0]而 0 是索引）你应该能够使用 splice 函数（例如： array.splice(0, 1); , 1 是它应该删除的索引之后的数量)。 然后你只需将它重写到本地存储并将它从表中取出。

Answer 2

您可以做的一件事是找到要删除的对象的索引，然后将其从数组中删除

let amountNow = amountInput.value;
let inOutNow = inOutInput.value;
let categoryNow = categoryInput.value;


let objToRemove = { "amount": amountNow, "inOut": inOutNow, "category": categoryNow, "month": month, "year": year }

let transactions = localStorage.getItem('transactions');
let transactionObj = [];

if (!transactions) {
 alert('list is empty');
 return;
}

transactionObj = JSON.parse(transactions);

// will return boolean
isObjSame(obj1,obj2)
{
  if(obj1.amount != abj2.amount) return false
  if(obj1.inOut != abj2.inOut) return false
  if(obj1.category != abj2.category) return false
  if(obj1.month != abj2.month) return false
  if(obj1.year != abj2.year) return false
  return true
 }

 // will find index of objToRemove
 // if obj is not in array, index will be -1
 index = transactionObj.findIndex((obj)=>{
   return isObjSame(objToRemove, obj);
 });

 if(index < 1)
 {
   alert('item is not there in the list');
   return;
 }

// 1 because want to remove 1 obj
transactionObj.splice(index,1);

localStorage.setItem('transactions',JSON.stringify(transactionObj);

Answer 3

当您创建对象时，为该对象以及创建的 html（如 001,002）分配一个 id，或者可以为此使用一些库，或者您可以使用new Date().getTime().toString()创建一个（我个人建议使用一些库）。

使用 querySeletorAll 选择所有表行或使用事件委托或任何你喜欢的并监听行上的单击事件以选择分配 id，如果 id 匹配不推送，则使用循环或数组过滤方法获取该 id 在 localStorage 中查找将其放入新数组中，然后使用该新数组更新 localStorage 并从表中删除该行