Next.js：如何访问localStorage？

Question

我目前正在使用 next.js 开发我的第一个会员区。现在我想在 localStorage 中存储一些数据（token、expiresAr、userInfo） - 顺便说一句，稍后这些数据将存储在仅 http 的 cookie 中。

使用以下代码，我收到错误：“LocalStorage 未定义”：

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");}

但是使用这段代码我收到错误“令牌未定义”。所以我尝试全局定义变量 const token、const userInfo 和 const expiresAt。但随后我收到错误：“JSON 中位置 1 处出现意外的标记 o”。

我有点被这个问题困扰，所以非常感谢您的帮助！谢谢！

Answer 1

在对代码进行了更多的尝试并在你们的帮助下，我找到了解决方案：

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），以便能够在代码的其他部分访问它们。

也许这对某人有帮助..

Answer 2

这个片段应该可以工作

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

您收到错误

token is undefined

或

unexpected token

的原因是因为您的

token

中还没有键

localStorage

或者您的值设置不正确。

Answer 3

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")

Answer 4

带有页面路由器的 Next JS 13

下面是如何在 Next JS 中创建/删除/更新 localStorage 的关键。

const [token, setToken] = useState(null);

useEffect(() => {
  if (typeof window !== "undefined" && window.localStorage) {
    let token = localStorage.getItem("token");
    setToken(token);
  }
}, [setToken]);

const createToken = (newToken) => {
  if (typeof window !== "undefined" && window.localStorage) {
    localStorage.setItem("token", newToken);

    let token = localStorage.getItem("username");

    setToken(token);
  }
};

const removeToken = () => {
  if (typeof window !== "undefined" && window.localStorage) {
    localStorage.removeItem("token");
    setToken(null);
  }
};

const logout = useCallback(() => {
  removeToken();
}, []);

参考

Answer 5

您还可以考虑使用动态导入的方式导入此组件AuthProvider，并将选项ssr设置为false， 示例

const AuthProvider=dynamic(()=>import("AuthProvider.tsx"),{ssr:false})

正常使用它就像在其他地方使用该组件一样，只需确保它是动态导入的。这对我有用。