从 reactjs 中的本地存储中删除项目答案

【问题标题】：Remove an item from local storage in reactjs从 reactjs 中的本地存储中删除项目
【发布时间】：2018-11-12 20:20:31
【问题描述】：

这是从 localStorage 中删除项目的正确代码吗：

onDelete(name) {
        console.log("ProductList.onDelete: ", name);
        let {products} = this.state;
        products = products.filter(product => product.name !== name);
        this.setState({products});
        localStorage.setItem('products', JSON.stringify(products));
}

【问题讨论】：

localStorage.removeItem();用于然后如何获取要删除的确切项目。

标签： javascript reactjs local-storage

【解决方案1】：

要从本地存储中删除项目，您只需运行：

localStorage.removeItem("name of the item")

【讨论】：

onDelete(name) { console.log("ProductList.onDelete: ", name);让{产品} = this.state; products = products.filter(product => product.name !== name); this.setState({products}); localStorage.removeItem('products', JSON.stringify(products)); }
是的，但我认为如果您需要从数组中删除一个项目，您还必须放入一些键值或拆分数组。
products.filter(product => product.name !== name);这一行是按名称查找项目吗
您并没有真正将 localStorage 用于数组。如果您真的想做这样的事情，请查看反应中的地图功能。您在 localStorage 中没有任何“id”，您可以通过调用 localStorage 项目的确切名称来简单地删除内容。如果您有一个名为 (hello) 的项目，那么它将被删除。但是，如果您有 10 个名为“hello”的项目，则所有 10 个项目都将通过 localStorage.removeItem 删除，这仅仅是因为您没有附加任何 id。你的产品需要是一个数组才能做到这一点。再次查看 react 的 map 函数。

【解决方案2】：

    let items =JSON.parse(localStorage.getItem("item"));
    items = items.filter((item) => item.id !== id);
    localStorage.setItem("item", JSON.stringify(items));
    if (items.length === 0) {
      localStorage.removeItem("item");
    }

【讨论】：

提供解释

【解决方案3】：

@Prometheus 是正确的。

既然你已经要求 ReactJS，我希望下面的小提琴可以帮助你： https://jsfiddle.net/ghoshnirmalya/eqb9vych/5/.

addItem = () => localStorage.setItem("name", this.state.name)

removeItem = () => localStorage.removeItem("name")

我在 ReactJS 中添加了一个完整的示例。

【讨论】：