Reactjs 如何在localStorage中存储Invott值？

在我的React电子商务项目中，我创建了“添加到购物车”图标，当单击“禁用”时，图标被替换为“购物车内”文本，显示产品在购物车内可用，但问题是当浏览器刷新时，“购物车内”文本消失，购物车图标返回。如何将其存储在localStorage中，以便在刷新时仍保留该值。以下是参考代码

ProductList.js

<ProductConsumer>
  {value => {
    return value.products.map((product, key) => {
      return  <Product key={product.id} product={product} />;
    });
  }}
</ProductConsumer>

如上所述，当产品在购物车中时，购物车图标被禁用，我希望在产品从购物车中删除之前或之前，使Invot为真（即使在浏览器刷新时）。注意沙盒链接：

---

添加了上述文件ProductList.js，并从context.js中的

setProducts

函数的context.js中定义了ProductConsumer

  setProducts = () => {
    let tempProducts = [];
    let activeProducts = JSON.parse(localStorage.getItem("myCart"));

    storeProducts.forEach(item => {
      let singleItem = { ...item };

      if(activeProducts){
         activeProducts.forEach(i => {
         if (singleItem.id === i.id) {
           singleItem = i;
         }
       });
      }

      tempProducts = [...tempProducts, singleItem];
    });

    this.setState(() => {
      return { products: tempProducts };
    });
  };

---

在

setProducts中使用codeSandbox-
在context.js中运行

  setProducts = () => {
    let tempProducts = [];
    let activeProducts = JSON.parse(localStorage.getItem("myCart"));

    storeProducts.forEach(item => {
      let singleItem = { ...item };

      if(activeProducts){
         activeProducts.forEach(i => {
         if (singleItem.id === i.id) {
           singleItem = i;
         }
       });
      }

      tempProducts = [...tempProducts, singleItem];
    });

    this.setState(() => {
      return { products: tempProducts };
    });
  };

正在使用codeSandbox-
在哪个文件中更改
Invot
的值？@AtinSingh请稍候，我将编辑post@AtinSingh后期编辑请查看它在哪个文件中您正在更改
化身的值？@AtinSingh请稍候，我将编辑post@AtinSingh后期编辑请看
  setProducts = () => {
    let tempProducts = [];
    let activeProducts = JSON.parse(localStorage.getItem("myCart"));

    storeProducts.forEach(item => {
      let singleItem = { ...item };

      if(activeProducts){
         activeProducts.forEach(i => {
         if (singleItem.id === i.id) {
           singleItem = i;
         }
       });
      }

      tempProducts = [...tempProducts, singleItem];
    });

    this.setState(() => {
      return { products: tempProducts };
    });
  };