如何从localStorage移除Item？

问题描述

嗨，我是JavaScript的新手，我正在尝试编写购物车代码。

我在购物车中的“ productsInCart” 键下有3个产品。我只希望删除单击了“已删除”按钮的行中的产品，但是当我按“删除”按钮时，购物车中的所有3个项目都将被删除。有什么解决办法吗？我猜是 localStorage.removeItem("productsInCart")应该更改为删除特定项目，但是我不确定该怎么做。

我添加了item.inCart = 0;，以便可以更新localStorage以显示购物车（cartNumbers）和totalCost中正确的项目总数。同样，这会将3种产品全部更改为0“ inCart”，而不是用户想要的特定产品。

解决方法

从您的问题中得到的信息：

您需要具有一组项目，也许是像这样的JS数组：

const items = [{},{},{}];

此数组的长度也将为您提供项目数，因此您不必显式维护它。

您需要将此数组在localStorage中设置为：

localStorage.setItem('itemList',JSON.stringify(items));

单击“删除”时，需要从列表中删除该项目。阅读有关从数组中删除元素的方法（pop，splice，slice等）

items.splice(index,1);

此后，您需要在本地存储中再次设置更新的项目。

在此处了解更多信息：https://www.w3schools.com/jsref/jsref_splice.asp

您应该从数组中删除JavaScript代码中所需的项（例如，使用splice命令），然后更新localStorage中的removeItem数组，而不要删除它。

因此，由于您只能在本地存储中以文本格式存储数据，因此在进行任何更新时都需要来回解析（所以JSON.stringify和JSON.parse）

您不能直接修改localStorage数据。您应该替换数据。您可以做的是，当删除一个项目时，将其索引放入数组中，然后读取localStorage数据，从数组中删除该项目，然后再次将数据保存到localStorage中。

var existingItems = JSON.JSON.parse(localStorage.getItem('cartItems'))
var itemIndex = 1 // index of item to be removed

existingItems.splice(itemIndex,1)

localStorage.setItem('cartItems',JSON.stringify(existingItems));

javascript json local-storage shopping-cart