javascript - Setting localStorage with cart Products

Question

I am implementing a e-commerce project in which i want store cartItems in local storage in react so it does not disappear after refresh. Cart Items are set to local storage successfully but when i refresh it again set to empty array. here is the code:

 useEffect(() => {
    localStorage.setItem("cartItems", JSON.stringify(cart.cartItems));
}, [cart.cartItems])
useEffect(() => {
  let cartProducts = JSON.parse(localStorage.getItem("cartItems"));
  if(cartProducts){
    setCart({...cart,cartItems:[...cartProducts]});
  }
}, []) 


here is the state:
const [cart, setCart] = useState({
        cartItems: []
    });

question from:https://stackoverflow.com/questions/65843121/setting-localstorage-with-cart-products

Answer 1

On Each refresh of page, due to this stateAssignment

const [cart, setCart] = useState({cartItems: []}); This useEffect is executed.

useEffect(() => {
    localStorage.setItem("cartItems", JSON.stringify(cart.cartItems));
}, [cart.cartItems])

And at that time cart.cartItems is []. Hence it is set to [].

You need to make sure that this useEffect should only run when there is a user-initiated change in cart.cartItems.