Javascript 错误 ReferenceError: localStorage is not defined Error

出现“ReferenceError: localStorage is not defined”错误有多种原因:

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

Javascript 错误 ReferenceError: localStorage is not defined Error

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

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

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

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

如果我们在浏览器中遇到错误,请确保没有拼错 localStorage 关键字(应该是小驼峰式)。

如果你使用的是 React.js 或 Next.js,并且需要检查我们是在浏览器上(可以使用 localStorage)还是在服务器上(不能使用 localStorage),可以通过以下方式执行此操作:

if (typeof window !== 'undefined') {
  console.log('浏览器端')
  // 👉️ 可以使用 localStorage 
} else {
  console.log('服务器端r')
  // 👉️ 不可以使用 localStorage
}

我们检查全局 window 变量是否没有 undefined 的类型。 如果定义了全局 window ,我们就在浏览器端,可以使用 localStorage 对象。

要解决“ReferenceError: localStorage is not defined”错误,需要确保仅在浏览器中使用 localStorage 对象。 localStorage 属性在 window 对象上定义,在服务器上不可用 – 例如 在 Node.js 中或在 Next.js 中使用服务器端渲染时。