React页面刷新后LocalStorage数据丢失，已有代码无法读取数据求解决

你的代码核心问题是组件挂载时，第二个useEffect会先把初始空数组[]存入LocalStorage，覆盖掉之前存储的数据——因为useState的状态更新是异步的，第一个读取LocalStorage的useEffect还没来得及更新状态，第二个存数据的useEffect就已经执行了。

修复方案 #

1. 直接在useState初始化时读取LocalStorage
   把状态初始化逻辑放到useState的初始化函数里，让组件一开始就能拿到存储的数据，无需依赖useEffect：

   const LOCAL_STORAGE_KEY = 'your-contacts-key'; // 确保这个常量正确定义且前后一致
   
   const [contacts, setContacts] = useState(() => {
     // 初始化阶段直接从LocalStorage读取数据
     const storedContacts = localStorage.getItem(LOCAL_STORAGE_KEY);
     // 有数据则解析返回，无数据则返回空数组
     return storedContacts ? JSON.parse(storedContacts) : [];
   });
   

2. 保留同步更新LocalStorage的useEffect
   这个useEffect负责在contacts变化时同步更新LocalStorage，无需大幅修改，可根据需求加个简单判断：

   useEffect(() => {
     // 可选：避免存入空数组（根据业务需求调整）
     if (contacts.length > 0) {
       localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
     }
   }, [contacts]);
   

额外检查项 #

• 确认LOCAL_STORAGE_KEY的拼写、大小写完全一致，没有笔误
• 确保contacts中的所有数据都可被JSON.stringify序列化（比如不能包含函数、Symbol、循环引用等）
• 检查浏览器是否允许使用LocalStorage（部分隐私模式会限制LocalStorage的读写）

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