ReferenceError: localStorage 未定义。在 Nextjs 中使用本地存储答案

【问题标题】：ReferenceError: localStorage is not defined. Using Local Storage in Nextjs [duplicate]ReferenceError: localStorage 未定义。在 Nextjs 中使用本地存储
【发布时间】：2021-09-12 06:55:00
【问题描述】：

如何解决本地存储未定义 next.js 中的错误。我对 next.js 很陌生并做出反应。我知道我们需要在检查本地存储数据之前进行某种形式的挂载，但我想不出办法。我正在尝试保存到本地存储中，以便刷新页面时数据不会消失

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 可能会有所帮助。
本地存储在服务器端不可用，如果两者都可用，请尝试使用 cookie

标签： javascript reactjs next.js local-storage react-context

【解决方案1】：

localStorage 或 window.localStorage 或 global.localStorage

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

【讨论】：

【解决方案2】：

你可以有一个简单的if条件来检查window是否存在：typeof window !== "undefined")

【讨论】：

【解决方案3】：

我在使用 SvelteKit 时遇到了同样的问题。

我认为这段代码对你有用，让你的代码更简单

先创建一个检查窗口的函数

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

那么，

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

【讨论】：