本文详解如何正确使用 localstorage 与 react 的 useeffect 配合，解决待办列表（todolist）刷新后数据丢失的问题，重点规避 json.parse 解析空值或无效字符串导致的崩溃，并确保初始化与更新逻辑安全可靠。
本文详解如何正确使用 localstorage 与 react 的 useeffect 配合，解决待办列表（todolist）刷新后数据丢失的问题，重点规避 json.parse 解析空值或无效字符串导致的崩溃，并确保初始化与更新逻辑安全可靠。
在 React 中实现本地持久化时，直接对 localStorage.getItem() 返回的 null 或非数组字符串调用 JSON.parse() 会引发运行时错误（如 SyntaxError: Unexpected token null），进而导致组件挂载失败、状态未正确恢复——这正是你遇到“刷新后数据消失”的根本原因。
✅ 正确做法：健壮的初始化 + 条件存储
首先，将初始状态设为 null 而非空数组，便于区分「尚未读取」和「读取为空」两种状态：
const [todos, setTodos] = useState(null);
接着，在首次加载时安全解析并赋值：
useEffect(() => {
const saved = localStorage.getItem("todoStorage");
try {
const parsed = saved ? JSON.parse(saved) : [];
// 显式校验是否为数组，避免意外类型（如对象、字符串）
setTodos(Array.isArray(parsed) ? parsed : []);
} catch (e) {
console.warn("Failed to parse todos from localStorage:", e);
setTodos([]); // 解析失败时降级为空数组，保障体验
}
}, []);
然后，在数据变更时仅当 todos 有效且已初始化才写入 localStorage（避免首次渲染时 todos 仍为 null 导致 JSON.stringify(null) 存入错误值）：
useEffect(() => {
if (Array.isArray(todos)) {
localStorage.setItem("todoStorage", JSON.stringify(todos));
}
}, [todos]);
⚠️ 关键注意事项
- 永远不要无条件 JSON.parse(null)：getItem() 在键不存在时返回 null，直接解析会报错；
- 避免空依赖数组中 setTodos(JSON.parse(null))：这是原代码崩溃的主因；
- 添加 try...catch：处理 localStorage 中可能存在的损坏/过期数据；
- 使用 Array.isArray() 而非 data?.length 判断：防止误将字符串 "[]" 或对象 {} 当作有效数组；
- 生产环境建议封装为自定义 Hook（如 useLocalStorage），提升复用性与可维护性。
通过以上改进，你的待办列表将在首次访问时从 localStorage 安全恢复，后续增删改操作实时持久化，页面刷新后数据毫秒级无缝重现。
