如何修复代码中的ReferenceError: localStorage is not defined错误？

为什么会出现ReferenceError: localStorage is not defined #

• 你的项目大概率是**服务端渲染（SSR）**架构（比如Next.js、Gatsby），代码会先在服务器端执行一遍。而localStorage是浏览器专属API，属于window对象的属性，服务器环境中没有window，直接调用就会报错。
• 你的代码在useState的初始化函数里直接读取localStorage，这个初始化逻辑会在组件初始化阶段执行——在SSR场景下，这个阶段是在服务器端，所以直接触发了错误。

代码问题与修复 #

你的核心问题是没有区分服务端和客户端环境，直接在可能运行于服务端的代码逻辑里调用了浏览器专属API。修复方案如下：

修正后的完整代码 #

import { useEffect, useState } from 'react';

function useBookmarks() {
  // 初始化时先设为空数组，避免服务端报错
  const [bookmarks, setBookmarks] = useState([]);

  // 在useEffect中读取localStorage——useEffect只在客户端执行
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const ls = localStorage.getItem('bookmarks');
      if (ls) setBookmarks(JSON.parse(ls));
    }
  }, []);

  const toggleItemInLocalStorage = (id) => () => {
    setBookmarks((prev) => {
      const isBookmarked = prev.includes(id);
      let updated;
      if (isBookmarked) {
        updated = prev.filter((b) => b !== id);
      } else {
        updated = [...prev, id];
      }
      // 同步更新localStorage
      localStorage.setItem('bookmarks', JSON.stringify(updated));
      return updated;
    });
  };

  return [bookmarks, toggleItemInLocalStorage];
}

export default useBookmarks;

关键修复点 #

• 将localStorage的读取逻辑移到useEffect中：useEffect的回调函数只会在客户端组件挂载后执行，不会在服务端运行，从根源避免了服务端调用浏览器API的问题。
• 添加环境检查：在调用localStorage前，通过typeof window !== 'undefined'判断是否处于浏览器环境，作为额外的安全保障。
• 逻辑优化：更新书签时，直接在setBookmarks的回调里同步更新localStorage，减少额外的useEffect监听，逻辑更紧凑。

内容的提问来源于stack exchange，提问作者Said Al - Ghiyats