在ReactJS中从本地存储中移除一个项目

Question

这段代码是否正确从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));
}

- Abhishek Konnur

---

如果使用了localStorage.removeItem();，那么如何获取要删除的确切项。 - Abhishek Konnur

Answer 1

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

localStorage.removeItem("name of the item")

- Prometheus

---

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

是的，但我认为如果你需要从一个数组中删除一个项，你必须添加一些键值或拆分该数组。 - Prometheus

这行代码 products.filter(product => product.name !== name); 是根据名称过滤出不匹配的物品，而非查找物品。 - Abhishek Konnur

你不应该使用localStorage来存储数组。如果你真的想要这样做，可以查看React中的map函数。localStorage没有任何“id”，你只需调用localStorage项目的确切名称即可删除它们。如果你有一个名为（hello）的项目，那么它将被删除。但是，如果你有10个名为“hello”的项目，所有这10个项目都将通过localStorage.removeItem被删除，因为它们没有任何附加的id。你的产品需要是一个数组才能这样做。再次，查看React的map函数。 - Prometheus

Answer 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");
    }

- Dee Jee

---

提供解释 - Sagar Gangwal

Answer 3

@Prometheus 是正确的。

既然你要求 ReactJS，我希望以下的 fiddle 对你有所帮助：https://jsfiddle.net/ghoshnirmalya/eqb9vych/5/。

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

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

我已经添加了一个完整的ReactJS示例。

- Nirmalya Ghosh