React定时拉取API数据时如何将当前值存入localStorage数组收藏

问题根因 #

你遇到的localStorage自动更新问题，核心原因是按钮点击事件的绑定写法错误：你直接把localStorage.setItem语句写在了onClick属性中，没有用函数包裹，这会导致组件每次渲染（也就是每3秒data更新触发重渲染）时，都会自动执行一次存储逻辑，而不是只有点击按钮时才触发。

具体实现方案 #

1. 新增独立的保存处理函数

在组件内新增专门处理收藏逻辑的函数，实现数组格式的存储，还可按需增加空值校验、重复收藏校验逻辑：

const handleSave = () => {
  // 拦截空值存储
  if (!data) return;
  // 读取本地已有的收藏列表，无数据则初始化空数组
  const savedList = JSON.parse(localStorage.getItem('savedData') || '[]');
  // 可选：判断当前内容是否已收藏，避免重复存储
  const isDuplicate = savedList.some(item => item === data);
  if (isDuplicate) {
    alert('该内容已收藏');
    return;
  }
  // 新内容推入数组后序列化存回localStorage
  savedList.push(data);
  localStorage.setItem('savedData', JSON.stringify(savedList));
  alert('收藏成功');
}

2. 修正保存按钮的事件绑定

替换原有按钮代码，绑定上述处理函数，仅点击时触发存储逻辑：

<button id="saveButton" onClick={handleSave}>Save!</button>

后续调取收藏列表的方法 #

需要使用收藏内容时，直接读取反序列化即可：

const getSavedList = () => {
  return JSON.parse(localStorage.getItem('savedData') || '[]');
}

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