ReactJS实现localStorage变更时自动渲染头部收藏计数

问题 #

开发电商项目的收藏夹功能，将收藏项存入localStorage，需要在Header组件实时展示收藏数量。目前添加收藏项到localStorage后，头部计数不会自动更新，仅手动点击按钮调用cou函数时才会更新，需解决自动渲染问题。

现有代码 #

状态与逻辑代码 #

const [count, setCount] = useState((JSON.parse(localStorage.getItem("liked"))));


const cou = () => {
  let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
  if (oldData.length === count.length) {
    setCount((JSON.parse(localStorage.getItem("liked"))))
  } else {
    setCount((JSON.parse(localStorage.getItem("liked"))))
  }
};

useEffect(() => {
  let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
  if (oldData.length === count.length) {
    setCount((JSON.parse(localStorage.getItem("liked"))))
  } else {
    setCount((JSON.parse(localStorage.getItem("liked"))))
  }
}, [(count.length)]);

头部计数展示标签 #

<span style={{ position: 'relative', left: '-21px', top: '-18px' }}>{count.length}</span>

解决方案 #

核心问题 #

React组件不会自动监听localStorage的变化，只有内部状态更新时才会触发重新渲染。原代码的useEffect依赖count.length会导致无效循环更新，且无法响应其他组件对localStorage的修改。

具体修改步骤 #

1. 添加localStorage变化监听：通过window.addEventListener监听storage事件，跨标签页修改localStorage时能触发状态更新；组件挂载时同步一次初始数据。
2. 简化冗余逻辑：删除cou函数和原useEffect里的无效判断，直接读取localStorage数据更新状态。
3. 清理监听事件：组件卸载时移除监听，避免内存泄漏。

修改后的代码示例 #

import { useState, useEffect } from 'react';

const Header = () => {
  // 初始化收藏项状态，默认空数组
  const [likedItems, setLikedItems] = useState(() => {
    return JSON.parse(localStorage.getItem("liked")) || [];
  });

  useEffect(() => {
    // 同步localStorage数据到组件状态
    const syncLikedItems = () => {
      const data = JSON.parse(localStorage.getItem("liked")) || [];
      setLikedItems(data);
    };

    // 组件挂载时先同步一次数据
    syncLikedItems();

    // 监听storage事件，跨标签页修改localStorage时触发
    window.addEventListener('storage', syncLikedItems);

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('storage', syncLikedItems);
    };
  }, []);

  // 可选：保留手动更新方法，用于特殊场景手动触发
  const manualUpdateCount = () => {
    const data = JSON.parse(localStorage.getItem("liked")) || [];
    setLikedItems(data);
  };

  return (
    <div className="header">
      {/* 其他Header内容 */}
      <span style={{ position: 'relative', left: '-21px', top: '-18px' }}>
        {likedItems.length}
      </span>
      {/* 可选：手动更新按钮 */}
      {/* <button onClick={manualUpdateCount}>刷新收藏数</button> */}
    </div>
  );
};

export default Header;

额外说明 #

如果是同一页面内的组件修改localStorage，storage事件不会触发，此时可以通过状态提升（将收藏数据放到父组件或全局状态管理）、发布订阅模式通知Header更新，或者在修改localStorage后直接调用manualUpdateCount方法。

内容的提问来源于stack exchange，提问作者Ilkin Karimov