Cant use localStorage in nextJS

Question

I'm developing a cart system and the problem is that, when I add a product to the cart, it works in context and localStorage; but, when I refresh, the data is gone.

const dispatch = useDispatch();
const {
  cartItems
} = useSelector((state) => state.cart)
const [cartState, setCartState] = useState({
  cartItems: [],
})
const initialRender = useRef(true);
useEffect(() => {
  if (JSON.parse(localStorage.getItem("cartState"))) {
    const storedCartItems = JSON.parse(localStorage.getItem("cartState"));
    setCartState([...cartItems, ...storedCartItems]);
  }
}, []);
useEffect(() => {
  if (initialRender.current) {
    initialRender.current = false;
    return;
  }
  window.localStorage.setItem("cartState", JSON.stringify(cartState));
}, [cartState]);

Did you check in the chrome devtools? Why the `window` before `localStorage` in the second useEffect? — Gabriel Pichot, Sep 28 '22 at 14:09
@GabrielPichot Why not? It is a method of the window so it should not make any difference — mplungjan, Sep 28 '22 at 14:21

JeanJacquesGourdin · Answer 1 · 2022-09-28T15:20:48.430

0

You are earsing the value of the local storage on the first render

useEffect(() => {
  if (initialRender.current) {
    initialRender.current = false;
    return;
  }
  //here
  window.localStorage.setItem("cartState", JSON.stringify(cartState));
}, [cartState]);

You should :

useEffect(() => {
  if (initialRender.current) {
    initialRender.current = false;
  } else {
    window.localStorage.setItem("cartState", JSON.stringify(cartState));
  }
}, [cartState]);

edited Sep 28 '22 at 15:20

answered Sep 28 '22 at 14:27

JeanJacquesGourdin

1,496
5
25

it dont work bro :((( – Yun Sep 28 '22 at 14:40
Can you try again with the edit please ? – JeanJacquesGourdin Sep 28 '22 at 15:06
it said TypeError: destroy is not a function :'( – Yun Sep 28 '22 at 15:13
@Yun There is no such thing in the code you provided, no idea where it comes from – JeanJacquesGourdin Sep 28 '22 at 15:17
I think the cause is async and await, bro – Yun Sep 28 '22 at 15:20

score 0 · Answer 2 · answered Sep 28 '22 at 15:14

What I usually do is have some state to check against to see if the client side is loaded:

const [clientLoaded, setClientLoaded] = useState(false);

useEffect(() => {
  setClientLoaded(true);
}, []);

Then anywhere you can check if clientLoaded is true, for example in another useEffect hook:

useEffect(() => {
  clientLoaded && doWhatever; // do whatever you want here 
}, [clientLoaded]);

Or in you render method:

{clientLoaded && <span>Render this if the client is loaded</span>}

Cant use localStorage in nextJS

2 Answers2