React中LocalStorage失效问题：刷新页面后存储数据消失

AI 小北

2026-8-24

问题分析

你的代码出现刷新后LocalStorage数据消失的核心原因是：组件挂载时，存储数据的useEffect会先于（或同步于）读取数据的useEffect执行，导致初始的noteData状态（大概率是空数组或undefined）覆盖了LocalStorage中已有的数据。

比如如果noteData初始值是[]，组件挂载流程是：

初始化noteData为[]
触发存储数据的useEffect，将[]存入LocalStorage
读取数据的useEffect执行，读取到的已经是被覆盖后的空数组

修复方案

方案1：用初始化函数设置状态（推荐）

把读取LocalStorage的逻辑放到useState的初始化函数里，确保初始状态直接从LocalStorage获取，避免挂载时的覆盖问题：

// 直接在useState中读取本地存储作为初始值
const [noteData, setNoteData] = React.useState(() => {
  try {
    const savedNotes = localStorage.getItem('react-note-app-data');
    // 有数据则解析，否则用默认值
    return savedNotes ? JSON.parse(savedNotes) : [];
  } catch (err) {
    // 处理JSON解析失败的情况
    console.error('读取本地存储失败:', err);
    return [];
  }
});

// 仅在noteData变化时存储，无需担心初始覆盖
React.useEffect(() => {
  localStorage.setItem('react-note-app-data', JSON.stringify(noteData));
}, [noteData]);

方案2：给存储的useEffect加条件判断

如果不想修改状态初始化逻辑，可以在存储的useEffect中添加判断，仅当noteData符合预期时才执行存储：

React.useEffect(() => {
  // 仅当noteData有有效内容时才存储，避免初始空值覆盖
  if (noteData && noteData.length > 0) {
    localStorage.setItem('react-note-app-data', JSON.stringify(noteData));
  }
}, [noteData]);