迹忆客 专注技术分享

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

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

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 中使用服务器端渲染时。