ReferenceError: localStorage is not defined. Using Local Storage in Nextjs

Question

how can I work around local Storage is not defined error in next.js. I am quite new to next.js and react. I know that we require to do some form of mounting before checking for local storage data but I cant figure out a way to do it. I am trying to save into local storage so the data doesn't disappear when the page is refreshed

export const GlobalContext = React.createContext();

export const GlobalProvider = (props) => {

const initialState = {
    watchlist: localStorage.getItem("watchlist")
        ? JSON.parse(localStorage.getItem("watchlist"))
        : [],
};



const [state, dispatch] = React.useReducer(AppReducer, initialState);

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

}, [state])


const addtoWatch = coin => {
    dispatch({ type: "ADD_COIN_TO_WATCHLIST", payload: coin })
}


return (
    <GlobalContext.Provider
        value={{
            watchlist: state.watchlist,
            addtoWatch,
        }}
    >
        {props.children}
    </GlobalContext.Provider>
);

};

[`useLocalStorage`](https://usehooks.com/useLocalStorage/) might help here. — Andy, Jun 30 '21 at 06:18
localstorage is not available on server side, try to use cookies if it has be available on both — Anish Antony, Jun 30 '21 at 07:23

score 3 · Answer 1 · answered Jun 30 '21 at 14:47

3

localStorage or window.localStorage or global.localStorage

if(typeof window !== "undefined") {
    if(localStorage.getItem("watchlist")) {
      return JSON.parse(localStorage.getItem("watchlist"))
    } else{
    return []
    }
 }

answered Jun 30 '21 at 14:47

Raghuraj Balasubramaniam

217
3
8

score 0 · Answer 2 · answered Jun 30 '21 at 06:23

0

You can have a simple if condition for checking window existence: typeof window !== "undefined")

answered Jun 30 '21 at 06:23

Dvir Hazout

251
1
3

masrimanas · Answer 3 · 2022-02-17T11:21:09.440

I faced the same issues with SvelteKit.

I think this code would works for you and make it your code simpler

create a function for checking window first

  const checkWindow = (action => {
        return typeof window !== undefined ? action : null;
    };

then,

const initialState = {
    watchlist: checkWindow(localStorage.getItem("watchlist"))
        ? JSON.parse(checkWindow(localStorage.getItem("watchlist")))
        : [],
};

score 0 · Answer 4 · answered Apr 07 '22 at 20:45

I have created a function getLocalStorageItem and called this in useEffect with the required key name. After getting the value from localStorage, saved it in a state(i.e currentUser) and used it in initialState.

 const [currentUser, setCurrentUser] = useState({});

  const getLocalStorageItem = (key) => {
    return typeof window !== undefined
      ? window.localStorage.getItem(key)
      : null;
  };

  useEffect(() => {
    setCurrentUser({
      token: getLocalStorageItem("token"),
      refreshToken: getLocalStorageItem("refreshToken"),
    });
  }, []);

  const initialState = {
    auth: {
      isLoggedIn: true,
      currentUser: currentUser,
    },
  };

ReferenceError: localStorage is not defined. Using Local Storage in Nextjs

4 Answers4