browser's localstorage keeps resetting to undefined

Question

I use ReactJs, I wanna push more items to the already exists item in localstorage but every time i reload localstorage is reset to undefined...

   React.useEffect(() => {
      localStorage.setItem("cartItems", JSON.stringify(cartItems));

      if (localStorage.getItem("cartItems") !== null) {
         try {
            let existing = localStorage.getItem("cartItems");
            if (existing !== JSON.stringify(cartItems)) {
               try {
                  let newExist = JSON.parse(existing).push(cartItems);
                  localStorage.setItem("cartItems", newExist);
               } catch (e) {
                  console.log("NOOOO")
               }
            }
         } catch (error) {
            console.log("CARTITMES Localstorage is empty")
         }
      } else {
         console.log("Null Cartitems in localstorea")
      }

   })

Answer 1

The first thing you are doing is setting your cart items to local storage

Assuming cartItems is an Array and is a State;

     React.useEffect(() => {
      // this is not necessary here
      //localStorage.setItem("cartItems", JSON.stringify(cartItems));

      if (localStorage.getItem("cartItems") !== null) {
         try {
            let existing = localStorage.getItem("cartItems");

            //this is not the best way to compare Arrys of objects
            
            if (existing !== JSON.stringify(cartItems)) {
               try {
                  //let newExist = JSON.parse(existing).push(cartItems);
                  let newExist = [...JSON.parse(existing), ...cartItems];
                  localStorage.setItem("cartItems", JSON.stringify(newExist));
               } catch (e) {
                  console.log("NOOOO")
               }
            }
         } catch (error) {
            console.log("CARTITMES Localstorage is empty");
           localStorage.setItem("cartItems", JSON.stringify(cartItems));
         }
      } else {
         console.log("Null Cartitems in localstorea");
         localStorage.setItem("cartItems", JSON.stringify(cartItems));
      }

   },[cartItems])

Answer 2

Separate your useEffect calls like below:

//First you need to get data from the previous session which should be stored in localstorage already. 
//We are using the key "cartItems" to identify the values we need
//if cartData exists then do something - (most likely JSON.parse(cartData)) if your goal is to work with the data that is stored

      React.useEffect(() => {
      const cartData = localstorage.getItem("cartItems")

      if (cartData) {
         try {

           //Your Logic Here
            }
         } catch (error) {
            console.log("CARTITMES Localstorage is empty")
         }
      } else {
         console.log("Null Cartitems in localstorea")
      }

   }, []);
   
//Below you're stringifying your object and storing it in local storage

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