React中如何在localStorage存储不同配料计数器值？

问题原因 #

所有配料计数器同步变化的核心问题是localStorage的键未区分不同配料：

• 代码中使用'burgerSetting[name]'作为存储键，但此处的name是字符串字面量而非变量，导致所有配料读写同一个localStorage键"burgerSetting[name]"，单个配料的计数变化会覆盖其他配料的值，引发同步更新。
• 初始burgerSetting对象未与localStorage关联，每个配料的状态初始化未正确读取对应专属值。

解决方案 #

方案1：为每个配料使用独立localStorage键 #

修改配料组件的localStorage操作逻辑，以配料名称作为唯一标识生成存储键：

// 修正存储键，为每个配料生成专属标识
const getFromStorage = () => { 
  const storageKey = `burgerSetting_${name}`;
  const storage = window.localStorage.getItem(storageKey);
  return storage !== null ? parseInt(storage) : 0;
};

const [count, setCount] = React.useState(getFromStorage);

// 状态变化时同步到对应localStorage键
useEffect(() => {
  const storageKey = `burgerSetting_${name}`;
  window.localStorage.setItem(storageKey, count);
}, [count, name]); // 添加name作为依赖，确保键匹配当前配料

// 点击事件逻辑保持不变
const plus = () => {
  setCount(count => count + 1);
};
const minus = () => {
  setCount(count => count - 1);
};

方案2：全局存储完整汉堡配置（更推荐） #

将所有配料的计数统一为一个对象存入localStorage，便于集中管理：

1. 父组件中管理全局状态并同步到localStorage：

function ShowIngredients() {
  // 从localStorage读取完整配置，无数据则用初始值
  const getBurgerSetting = () => {
    const storage = window.localStorage.getItem('burgerSetting');
    return storage ? JSON.parse(storage) : {
      "Cutlet":0, "Mayo":0, "Onion":0, "Tomato":0, 
      "Cucumber":0, "Cheese":0, "Salad":0
    };
  };

  const [burgerSetting, setBurgerSetting] = React.useState(getBurgerSetting);

  // 状态更新时同步到localStorage
  useEffect(() => {
    window.localStorage.setItem('burgerSetting', JSON.stringify(burgerSetting));
  }, [burgerSetting]);

  // 统一处理配料计数增减，控制0-3的边界
  const updateCount = (ingredientName, change) => {
    setBurgerSetting(prev => {
      const newCount = Math.max(0, Math.min(3, prev[ingredientName] + change));
      return {...prev, [ingredientName]: newCount};
    });
  };

  return (
    <div className='show-ingredients'>
      {ingredients.map((obj) => (
        <Ingredients 
          name={obj.name} 
          image={obj.image} 
          key={obj.id}
          count={burgerSetting[obj.name]}
          onPlus={() => updateCount(obj.name, 1)}
          onMinus={() => updateCount(obj.name, -1)}
        />   
      ))}
    </div>
  );
}

2. 调整配料组件，接收父组件传递的状态与操作函数：

function Ingredients({ name, image, count, onPlus, onMinus }) {
  return (
    <div className="ingredients">
      <div className="ingr-card">
        <div className="image-ingr">
          <img src={image} alt={name} /> 
        </div>
        <div className="name-ingr">
          <p>{name}</p>
        </div>
        <div className="counter">
          <button disabled={count === 0} onClick={onMinus}>-</button>
          <p>{count}</p>
          <button disabled={count >= 3} onClick={onPlus}>+</button>
        </div>
      </div>
    </div>
  );
}

关键优化点 #

• 方案2将状态提升至父组件，统一管理所有配料计数，避免多组件重复操作localStorage，减少冗余代码。
• 两种方案均确保每个配料的计数有独立存储标识，不会互相覆盖。
• 新增边界值控制（0到3），确保计数器始终符合业务规则。

内容的提问来源于stack exchange，提问作者Yuliia Kulachko