请说明在 React 应用里，页面刷新后如何避免数据丢失并恢复原有状态？

回答思路

1. 【回答框架 1】核心思路是区分数据存储位置：组件内部 state 在刷新后会重置，因此需要将关键数据同步到浏览器持久化存储或服务端。常见方案包括 localStorage、sessionStorage、IndexedDB 和 URL 参数。
2. 【回答框架 2】localStorage 适合长期保留且无需自动过期的数据，写入同步、容量约 5-10MB；sessionStorage 在标签页关闭后清空，适合临时会话数据。两者都只存储字符串，对象需 JSON.stringify 后再存。
3. 【回答框架 3】对于复杂或大数据量，可选用 IndexedDB 异步存储，支持结构化数据和索引，但 API 较底层，通常借助库封装。刷新后需在应用初始化阶段读取存储并恢复状态，例如在 Redux 或 Zustand 中实现 rehydrate。
4. 【回答框架 4】更稳妥的做法是结合服务端持久化：刷新时通过 API 拉取用户数据。仅依赖本地存储时要注意数据一致性，例如多标签页同步和存储容量限制。
5. 【回答框架 5】选型建议：简单场景用 localStorage 结合封装函数，敏感或高频数据优先服务端，并考虑使用库如 redux-persist 简化流程。
6. 【关键点 1】localStorage 可保存字符串，对象需序列化，适合低频、数据量小的持久化场景
7. 【关键点 2】刷新恢复状态需在应用启动时读取存储并初始化状态，可借助状态管理库的持久化中间件
8. 【关键点 3】高一致性或敏感数据应依赖服务端存储，本地存储只做缓存
9. 【易错点 1】不要在本地存储明文保存敏感信息，存在 XSS 泄露风险
10. 【易错点 2】不要对每次状态更新都同步写入存储，可能造成性能问题，应使用防抖或节流
11. 【易错点 3】注意 localStorage 存储可能被用户清除或占用满，读取时要做好容错处理