刷新后，本地存储中已删除的项目仍然存在香草JS

问题描述

我有一个费用跟踪器，在其中将费用添加到表中，并将其保存到localStorage并将这些项目显示在UI上。但是，当我删除一个项目时，它并没有像应该的那样从localStorage中删除。它会从用户界面中删除，然后在刷新后返回。

当我试图更好地理解面向对象编程时，我使用了Brad Traversy教程（https://www.youtube.com/watch?v=JaMCxVWtW58&t=811s）来提供结构帮助。我看到其他人在网上的结构完全相同，只是名字不同。但是到目前为止，还没有答案。

该代码分为3个不同的类，即LineItem，UI和用于localStorage的Store。这是我的Store类中的remove方法：

static removeLineItem(id) {
  let lineItems = Store.getLineItems();
  lineItems.forEach((lineItem,index) => {
    if(lineItem.id === id) {
      lineItems.splice(index,1);
    }
  });

  localStorage.setItem('lineItems',JSON.stringify(lineItems));

}

在这里被称为：

document.querySelector('.table').addEventListener('click',(e) => {
  
  // Remove lineItem from Store
  Store.removeLineItem(e.target.parentElement.prevIoUsElementSibling.innerText)
  
});

这是每行的标记，以显示遍历DOM时id的来源：

const lineItemRow = document.createElement("tr");
    lineItemRow.classList.add("table-success","line-item");
    lineItemRow.innerHTML = `
      <th>${lineItem.name}</th>
      <td>$${lineItem.amount}</td>
      <td>${lineItem.date}</td>
      <td>${lineItem.id}</td>
      <td class="btn-container">
        <span class="badge badge-pill badge-danger cursor-pointer delete">X</span>
      </td>
    `

我尝试使用filter（）而不是splice（），但是它不起作用。

const filteredLineItems = lineItems.filter(lineItem => lineItem.id !== id);

我已经读到splice（）并不是最好的方法，因为它可以使事情搞砸，但是除了filter之外，我不知道有其他方法可以做到这一点。我也曾在React Apps中使用过filter（）多次，并且效果很好。所以我不明白为什么最少过滤器不起作用。

也没有错误消息。而且我已经将id记录在remove方法和eventListener中，它们都可以正常显示。

任何帮助将不胜感激。并且让我知道您是否需要查看另一段代码或标记。

编辑：Store.getLineItems（）

static getLineItems() {
  let lineItems;
  if(localStorage.getItem('lineItems') === null) {
    lineItems = [];
  } else {
    lineItems = JSON.parse(localStorage.getItem('lineItems'));
  }
    return lineItems;
}

解决方法

我的天哪。我只是想通了。我设置的ID是一个数字。（我使用Math.random（））在这种方法中，我使用===来比较类型，而不仅仅是值。在本地存储中，标识存储为字符串而不是数字。所以，那当然是行不通的。该代码只是按照我的要求去做：）

所以我需要改用==。

static removeLineItem(id) {
  let lineItems = Store.getLineItems();
  lineItems.forEach((lineItem,index) => {
  if(lineItem.id === id) {
     lineItems.splice(index,1);
   }
});

localStorage.setItem（'lineItems'，JSON.stringify（lineItems））;

}

filter filter javascript local-storage splice