Next.js：如何访问localStorage？

bwleehnv 于 2023-02-22 发布在其他

关注(0)|答案(3)|浏览(209)

我目前正在用next.js开发我的第一个会员区。现在我想在localStorage（token，expiresAr，userInfo）- btw中存储一些数据，稍后这将存储在http-only cookie中。
使用下面的代码，我得到了错误：“未定义本地存储”：

const AuthProvider = ({ children }) => {
   
   const token = localStorage.getItem("token");
   const userInfo = localStorage.getItem("userInfo");
   const expiresAt = localStorage.getItem("expiresAt");
   

  const [authState, setAuthState] = useState({
    token,
    expiresAt,
    userInfo: userInfo ? JSON.parse(userInfo) : {},
  });

  const setAuthInfo = ({ token, userInfo, expiresAt }) => {
    localStorage.setItem("token", token);
    localStorage.setItem("userInfo", JSON.stringify(userInfo));
    localStorage.setItem("expiresAt", expiresAt);

    setAuthState({
      token,
      userInfo,
      expiresAt,
    });
  };

我已经尝试使用以下剪：

if (typeof window !== 'undefined') {
const token = localStorage.getItem("token");
const userInfo = localStorage.getItem("userInfo");
const expiresAt = localStorage.getItem("expiresAt");}

但是在这段代码中，我得到了错误“token is undefined”，所以我尝试全局定义变量const token，const userInfo和const expiresAt，但是我得到了错误：“JSON中位置1处的意外标记o”。
我有点被这个问题卡住了，所以任何帮助都是感激的！谢谢！

next.js

来源：https://stackoverflow.com/questions/65479659/next-js-how-to-access-localstorage

3条答案

按热度按时间

gk7wooem1#

此代码片段应该可以工作

if (typeof window !== 'undefined') {
  const token = localStorage.getItem("token");
  const userInfo = localStorage.getItem("userInfo");
  const expiresAt = localStorage.getItem("expiresAt");
}

出现错误token is undefined或unexpected token的原因是localStorage中没有键token，或者值设置不正确。

赞(0）回复(0）举报 2023-02-22

sr4lhrrt2#

在你们的帮助下，我对代码进行了更多的研究，然后找到了解决方案：

const AuthProvider = ({ children }) => {
  let token = "";
  let userInfo = "";
  let expiresAt = "";

  if (typeof window !== "undefined") {
    token = localStorage.getItem("token");
    userInfo = localStorage.getItem("userInfo");
    expiresAt = localStorage.getItem("expiresAt");
  }

...

if语句告诉我们在窗口可用时运行代码，我还必须在if语句之外定义变量（let token、let expiresAt和let userInfo），以便能够在代码的其他部分访问它们。
也许这对某人有帮助。

赞(0）回复(0）举报 2023-02-22

xmakbtuz3#

useEffect钩子只在客户端运行。因此，访问其中的存储将保证存储已定义。下面是一个自定义钩子：

export default function useStorage(key, type = "sessionStorage") {
  const [value, setValue] = useState();

  // Initial fetch from storage
  useEffect(() => {
    const storage = type === "sessionStorage" ? sessionStorage : localStorage;
    setValue(storage.getItem(key));
  }, [key, type]);

  // Persist to storage
  useEffect(() => {
    // first render, don't override/destroy existing item value
    if (value !== undefined) {
      const storage = type === "sessionStorage" ? sessionStorage : localStorage;
      storage.setItem(key, value);
    }
  }, [key, value, type]);

  return [value, setValue];
}

用法：

const [myValue, setMyValue] =  useStorage("my_value")

赞(0）回复(0）举报 2023-02-22

我来回答

Next.js：如何访问localStorage？

3条答案

相关问题

热门标签

最新问答