ReferenceError: localStorage 未在 JS、Next.js 中定义

ReferenceError: localStorage 没有在 JavaScript 中定义

ReferenceError: localStorage is not defined in JavaScript

出现“ReferenceError: localStorage is not defined”的原因有多种：

localStorage在 Node.js 中使用。
localStorage在服务器上使用（例如 Next.js 中的服务器端渲染）。
全局变量拼写错误localStorage（应该是驼峰式）。

未定义参考错误本地存储

壳


ReferenceError: localStorage is not defined

localStorage
属性是对象的一个
属性window，因此它在服务器上不可用。

索引.js


console.log(localStorage === window.localStorage); // 👉️ true

localStorage.setItem('name', 'Tom');

console.log(localStorage.getItem('name')); // 👉️ "Tom"

如果您在浏览器中遇到错误，请确保您没有拼错关键字（应该是驼峰式）。 localStorage

如果你使用 React.js 或 Next.js 并且你需要检查你是在浏览器上（可以使用localStorage）还是在服务器上（不能使用localStorage），请检查window变量是否为 not undefined。

索引.js


if (typeof window !== 'undefined') {
  console.log('You are on the browser')
  // 👉️ can use localStorage here

  localStorage.setItem('name', 'Tom');

  console.log(localStorage.getItem('name')); // 👉️ "Tom"
} else {
  console.log('You are on the server')
  // 👉️ can't use localStorage
}

我们检查全局window变量是否没有. 如果定义了变量，我们就可以在浏览器上使用API。 undefinedwindowlocalStorage

if只有当我们处于浏览器环境中并且window
对象已定义时，该块才会运行。

localStorage如果您使用 React.js，您还可以在useEffect钩子或事件处理程序中使用。

应用程序.js


import {useEffect} from 'react';

export default function App() {
  useEffect(() => {
    console.log(localStorage.getItem('counter'));
  }, []);

  return (
    <div>
      <h2>hello world</h2>

      <button
        onClick={() => {
          localStorage.setItem('counter', 100);
        }}
      >
        Increment counter
      </button>
    </div>
  );
}

该useEffect()钩子仅在浏览器上运行，从不在服务器上运行。

我们还在localStorage.setItem()事件处理程序中使用了该方法，这也是允许的。

最常用的localStorage方法是
setItem()
和
getItem()。

索引.js


// 👇️ adds the key and value to the localStorage object
localStorage.setItem('key', 'value')

// 👇️ returns the value of the specified key or null if the key doesn't exist
localStorage.getItem('key')

ReferenceError: localStorage 未在 Next.js 中定义

“ ReferenceError : localStorage is not defined”经常出现在 Next.js 应用程序中，当您尝试在localStorage浏览器呈现之前访问它时。

这可能在 React.js 组件的主体中。

应用程序.js


import {useState} from 'react';

export default function App() {
  // ⛔️ this would run before the browser is ready (BAD)
  const [name, setName] = useState(localstorage.getItem('name'))

  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
}

您可以将null初始值作为初始值传递给挂钩并在您的挂钩中useState访问
。localStorageuseEffect

该useEffect钩子在 React 在浏览器环境中渲染您的组件后运行，因此您可以安全地localStorage使用useEffect.

应用程序.js


import {useEffect} from 'react';

export default function App() {
  useEffect(() => {
    console.log(localStorage.getItem('counter'));
  }, []);

  return (
    <div>
      <h2>hello world</h2>

      <button
        onClick={() => {
          localStorage.setItem('counter', 100);
        }}
      >
        Set counter
      </button>
    </div>
  );
}

如果这不起作用，则必须使用if语句来检查您是在浏览器（可以使用localStorage）还是服务器（不能使用localStorage）上。

索引.js


if (typeof window !== 'undefined') {
  console.log('You are on the browser')
  // 👉️ can use localStorage here

  localStorage.setItem('name', 'Tom');

  console.log(localStorage.getItem('name')); // 👉️ "Tom"
} else {
  console.log('You are on the server')
  // 👉️ can't use localStorage
}

结论

要解决“ReferenceError: localStorage is not defined”错误，请确保仅localStorage在浏览器中使用该对象。

该localStorage属性在对象上定义window，在服务器上不可用，例如在 Node.js 中或在使用 Next.js 进行服务器端渲染时。