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

Posted 2023-03-30

【中文标题】ReferenceError: localStorage 未定义。在 Nextjs 中使用本地存储

【英文标题】：ReferenceError: localStorage is not defined. Using Local Storage in Nextjs [duplicate]

【发布时间】：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

【参考方案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")))
        : [],
;