Javascript 如何使用react和本地存储将数据保持在状态？

当前正在构建一个购物车，其中一个组件保存产品，onClick（add to cart）我会将项目添加到本地存储，然后在另一个组件中检索并显示本地存储中的项目

我当前的设置工作正常，但在刷新时，如果添加了新项，则会覆盖旧数据。我假设刷新时状态重置为空。您将如何实现数据在有或没有状态的情况下持久化

class ProductsContainer extends Component {
  constructor(props) {
    super(props);
    this.state = { products: [] };
    this.addToCart = this.addToCart.bind(this);
  }

  addToCart = (item) => {
    let productList = this.state.products;
    productList.push({ img: item.img, name: item.name, price: item.price });
    this.setState({ products: productList });
    localStorage.setItem("products", JSON.stringify(productList));
  };

...
...
...

render(){
  return(
    <button className="add-item" onClick={() => this.addToCart(item)}>
  )
});

---

当刷新页面并尝试添加新阵列时，您似乎正在覆盖本地存储中的产品，以避免在替换以前的阵列之前对本地存储进行少量检查：

const products = JSON.parse(localStorage.getItem("products"));
if (products) localStorage.setItem("products", JSON.stringify([...products, product]));
else localStorage.setItem("products", JSON.stringify([product]));

const products = JSON.parse(localStorage.getItem("products"));
if (products) localStorage.setItem("products", JSON.stringify([...products, product]));
else localStorage.setItem("products", JSON.stringify([product]));