React中localStorage未定义问题及书签功能getItem报错求助

错误原因 #

你遇到的ReferenceError: localStorage is not defined是因为localStorage是浏览器专属API：如果项目采用服务端渲染（比如Next.js），组件在服务端执行时无法访问该API；就算是纯前端项目，直接在组件顶层代码调用localStorage，也可能在浏览器环境初始化完成前触发错误。

修复方案 #

1. 安全初始化书签状态 #

将读取localStorage的逻辑放到浏览器环境下执行，要么在state初始化时做环境判断，要么放到useEffect中。

2. 修正数据同步逻辑 #

不要直接覆盖findBookmark变量，而是通过state同步localStorage的数据，保证逻辑一致性。

修改后的完整代码：

import { useState, useEffect, useContext } from 'react';
import Context from './your-context-file-path'; // 替换为你的Context实际路径

const BookmarkComponent = () => {
  // 初始化书签ID列表：仅在浏览器环境读取localStorage，服务端返回空数组
  const [bookmarkIds, setBookmarkIds] = useState(() => {
    if (typeof window !== 'undefined') {
      const savedIds = localStorage.getItem('bookmarkIds');
      return savedIds ? JSON.parse(savedIds) : [];
    }
    return [];
  });

  const { showBookmark, setShowBookmark } = useContext(Context);

  const addToBookmark = (id) => {
    if (!bookmarkIds.includes(id)) {
      const newIds = [...bookmarkIds, id];
      setBookmarkIds(newIds);
      localStorage.setItem('bookmarkIds', JSON.stringify(newIds));
    }
  };

  const removeBookmark = (id) => {
    const newIds = bookmarkIds.filter(item => item !== id);
    setBookmarkIds(newIds);
    localStorage.setItem('bookmarkIds', JSON.stringify(newIds));
  };

  // 基于当前书签ID列表过滤数据，无需依赖localStorage
  const findBookmark = data1.ayat.filter(item => bookmarkIds.includes(item.nomor));

  return (
    <div>
      {/* 示例：渲染书签内容 */}
      {showBookmark && findBookmark.map(item => (
        <div key={item.nomor}>
          {item.content}
          <button onClick={() => removeBookmark(item.nomor)}>取消书签</button>
        </div>
      ))}
    </div>
  );
};

export default BookmarkComponent;

关键改动说明 #

• 环境判断初始化：用函数式初始化state，通过typeof window !== 'undefined'确保只在浏览器环境读取localStorage，避免服务端报错。
• 直接同步存储：在添加/移除书签时直接更新localStorage，不需要依赖findBookmark触发useEffect，逻辑更直接，减少不必要的渲染。
• 简化删除逻辑：用filter替代切片拼接，代码更简洁易读。
• 避免变量覆盖：不再修改findBookmark变量，而是基于实时的bookmarkIds state过滤数据，保证数据一致性。

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