如何修改代码避免多图标共用逻辑时localStorage值被覆盖

解决方案 #

核心问题是所有图标共用localStorage的color固定键名，导致存储值互相覆盖，只需要给每个图标分配唯一的存储键即可解决，推荐把图标逻辑封装为独立复用组件： #

1. 封装独立可复用图标组件 #

import { useState, useEffect } from 'react';
import Icon from '你的Icon组件引入路径';

// 组件接收唯一标识iconId作为入参
const ColorToggleIcon = ({ iconId }) => {
  // 动态生成当前图标专属的localStorage存储键
  const STORAGE_KEY = `icon_color_${iconId}`;
  const [color, setColor] = useState("");

  // 组件挂载时仅读取当前图标对应的存储值
  useEffect(() => {
    const savedColor = window.localStorage.getItem(STORAGE_KEY);
    if (savedColor) {
      setColor(savedColor);
    } else {
      localStorage.setItem(STORAGE_KEY, "");
    }
  }, [STORAGE_KEY]);

  // 点击逻辑仅操作当前图标对应的存储项
  const handleClick = () => {
    const currentColor = window.localStorage.getItem(STORAGE_KEY);
    if (currentColor === "") {
      localStorage.setItem(STORAGE_KEY, "red");
      setColor("red");
    } else {
      localStorage.setItem(STORAGE_KEY, "");
      setColor("");
    }
  };

  return (
    <div onClick={handleClick} className="icon__content--container">
      <Icon style={{ color: color }} />
    </div>
  );
};

export default ColorToggleIcon;

2. 父组件调用时传入唯一ID #

使用时给每个图标传入不同的iconId即可实现存储完全隔离，不会互相干扰：

// 父组件内使用示例
<ColorToggleIcon iconId="home" />
<ColorToggleIcon iconId="user_center" />
<ColorToggleIcon iconId="settings" />

可选优化 #

如果你的图标本身已经携带唯一属性（比如图标名、业务ID），可以直接复用该属性作为iconId，不需要额外传值。
内容的提问来源于stack exchange，提问作者Shahir Riaz