react 组件刷新后 localstorage 数据丢失，通常是因为未在状态变更时同步写入，或初始化逻辑覆盖了已保存的数据。本文详解正确读写流程、常见陷阱及完整实践代码。

在 react 中使用 localStorage 实现数据持久化看似简单，但极易因生命周期处理不当导致“数据看似存了，刷新却消失”的问题。核心原因有两个：一是 useEffect 初始化逻辑执行时机不当，二是状态更新后未及时同步写入 localStorage。

✅ 正确做法：分离读取与写入逻辑

• 初始化读取（仅一次）：使用空依赖数组 [] 的 useEffect 从 localStorage 加载初始数据，避免重复覆盖；
• 每次变更立即写入：无论添加、删除还是修改状态，都应在 setState 的回调或更新函数中调用 localStorage.setItem()，确保最新状态落盘。

以下为优化后的关键代码逻辑（已通过 CodeSandbox 验证）：

import { useState, useEffect } from "react";  export default function App() {   const [courseGoal, setCourseGoal] = useState([]);    // ✅ 初始化：仅在组件挂载时从 localStorage 读取一次   useEffect(() => {     const saved = localStorage.getItem("MY_LIST_OF_GOALS");     if (saved) {       try {         setCourseGoal(JSON.parse(saved));       } catch (e) {         console.warn("Failed to parse localStorage data", e);       }     }   }, []);    // ✅ 工具函数：统一写入逻辑，含错误防护   const saveToLocalStorage = (goals) => {     try {       localStorage.setItem("MY_LIST_OF_GOALS", JSON.stringify(goals));     } catch (e) {       console.error("Failed to save to localStorage", e);     }   };    // ✅ 添加新目标：更新状态 + 立即持久化   const addGoalHandler = (enteredText) => {     setCourseGoal((prev) => {       const newItem = {         id: Date.now(), // 简单唯一 ID（生产环境建议用 uuid）         text: enteredText.trim()       };       const updated = [newItem, ...prev];       saveToLocalStorage(updated); // ? 关键：写入必须在此处触发       return updated;     });   };    // ✅ 删除目标：同理，更新后立刻保存   const deleteGoalHandler = (id) => {     setCourseGoal((prev) => {       const updated = prev.filter((goal) => goal.id !== id);       saveToLocalStorage(updated);       return updated;     });   };    return (     
              
Course List
            
   ); }

⚠️ 常见错误与注意事项

• ❌ 错误模式：在 useEffect 中监听 courseGoal 并自动同步（如 useEffect(() => { save() }, [courseGoal])）——这会引发不必要的频繁写入，且可能在异步更新中读到旧值；
• ❌ 忽略解析异常：jsON.parse() 可能抛错（如 localStorage 被手动清空或格式损坏），务必包裹 try/catch；
• ❌ ID 冲突风险：若使用 math.random() 或简单递增数生成 ID，多标签页操作时易重复，推荐 Date.now() 或 crypto.randomUUID()（现代浏览器支持）；
• ✅ 最佳实践：将 localStorage 操作封装为独立 Hook（如 useLocalStorage），提升复用性与可测试性。

只要确保「每次状态变更 → 立即序列化写入」，并「仅在初始化时读取一次」，即可彻底解决刷新后数据丢失问题。 localStorage 不是魔法，而是需你主动管理的本地存储媒介——控制权永远在开发者手中。