Next.js：如何访问本地存储？答案

【问题标题】：Next.js: How to access localStorage?Next.js：如何访问本地存储？
【发布时间】：2021-04-05 08:17:49
【问题描述】：

我目前正在使用 next.js 开发我的第一个会员区。现在我想在 localStorage (token, expiresAr, userInfo) 中存储一些数据 - 顺便说一句，稍后这将存储在 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");}

但是使用此代码时，我收到错误“令牌未定义”。所以我尝试在全局范围内定义变量 const token、const userInfo 和 const expiresAt。但随后我收到错误消息：“位置 1 处 JSON 中的意外标记 o”。

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

【问题讨论】：

在setAuthInfo 函数中尝试console.log(token)，也可以转到devtools->application->storage->local-storage 并检查那里是否有任何设置。如果它的值不是字符串，您也可以在 setAuthInfo 中净 JSON.stringify 令牌
感谢您的帮助！当转到 devtools > aooplication > localStorage 时，我可以看到 expiresAt、token 和 userInfo 的键值。一切对我来说都是正确的。所以数据是在localStorage中设置的，但我无法获取它们。有什么我可以尝试的想法吗？
您确定您没有尝试在后端 (SSR) 上获取此数据吗？当你console.log(localStorage.getItem("userInfo")) 时会发生什么，如果你的数据设置正确，它应该可以直接在 localStorage 对象上使用，就像这样，localStorage.token，如果你console.log(localStorage) 你看到你设置的属性了吗？
当我 console.log(localStorage.getItem("userInfo")) 我得到了 userInfo 的对象：类似这样 {"id": 17, "firstName": "e"} - 这个我也在 localStorage 中看到的对象，它与我的数据库匹配。当我 console.log(localStorage) 我得到一个更长的字符串。像这样的东西：存储 {userInfo: "{"id":17,"firstName":"e"}", expiresAt: "1609183115", ally-supports-cache: "{"userAgent": ...}",令牌：“eyJhbGciO..”，长度：4}。我真的是开发新手 - 所以是的，也许 SSR 和 CSR 存在问题。
我还发现了这个 - 也许这可能会有所帮助：stackoverflow.com/questions/59540321/…

标签： javascript authentication local-storage next.js

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

也许这对某人有帮助..

【讨论】：

【解决方案2】：

这个 sn-p 应该可以工作

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，或者您的值设置不正确。

【讨论】：

谢谢！我仔细检查了所有内容——也在@Andrius 的帮助下：在我的 devtools > Application > LocalStorage 中，我可以看到 token、expiresAt 和 userInfo 的键值。一切看起来都不错。在我看来，好像我已经在 localStorage 中设置了这些项目，但我无法获取它们。我认为这是因为 next.js？有什么想法我可以尝试解决这个问题吗？