React应用中如何在每次页面刷新时将localStorage值加1

你原来的代码会在每次页面加载时强制将count重置为1，要实现刷新递增的逻辑，需要调整为先读取现有值，再根据情况更新的逻辑，具体代码如下：

useEffect(() => {
  // 读取localStorage中已有的count值
  const currentCount = window.localStorage.getItem('count');
  // 计算新值：首次加载无数据则初始为1，否则在上次值基础上加1
  const newCount = currentCount ? Number(currentCount) + 1 : 1;
  // 将新值存回localStorage
  window.localStorage.setItem('count', String(newCount));
}, []);

关键说明： #

• 空依赖数组[]确保这段逻辑仅在组件首次挂载（即页面刷新完成后）执行一次
• 使用Number()将读取到的字符串值转为数字，避免出现"1"+1="11"这类字符串拼接错误
• 首次加载时localStorage中无count项，会自动初始化为1；之后每次刷新都会基于上一次的数值递增

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