VIP20

本课程属于：005-移动性能稳定性与离线缓存 移动端与Android应用开发 · 共 20 门相关课程，组合学习更完整。

查看所属VIP全部课程 →

← 返回所属目录咨询 / 购买

页面状态保存与状态机设计实践

共计 30 章节

点击此处阅读海量试读课程：100+行业、1000+细分领域

页面状态保存的四种核心策略

localStorage存储 · sessionStorage存储 · URL参数保持

页面状态保存的四…localStorage

localStorage与sessionStorage的API封装

getItem/setItem/re… · JSON序列化与反序列化 · 容量限制与异常处理

localStoragesessionStora…

URL查询参数状态同步

使用URLSearchParams读… · history.replaceSta… · popstate事件监听

URL查询参数状态同步

Redux持久化中间件实现

redux-persist库配置 · 白名单/黑名单过滤 · 存储引擎切换（localStorag…

MobX状态持久化方案

autorun与reaction监听 · 存储到localStorage · 恢复时重新创建可观察对象

MobX状态持久化方案

Vuex持久化插件编写

plugin机制 · subscribe与replaceS… · 自动保存恢复

Vuex持久化插件编写

Pinia状态持久化

plugin实现 · $subscribe监听 · 序列化选项

Pinia状态持久化

IndexedDB复杂状态存储

数据库创建 · 对象仓库 · 事务读写

IndexedDB复杂状态存储

状态版本管理与迁移

版本号字段 · 迁移函数注册 · 旧数据升级为新结构

状态版本管理迁移

状态加密存储

CryptoJS对称加密 · 解密后还原状态对象 · 密钥管理策略

状态加密存储CryptoJS

状态压缩存储

lz-string压缩库使用 · 空间优化 · 压缩解压性能对比

状态压缩存储lz-string

状态过期机制

TTL时间戳字段 · 读取时检查过期 · 清除过期数据触发回调

状态过期机制TTL

状态变更的防抖与节流

lodash throttle/de… · 减少存储写入频率 · 避免性能抖动

状态变更的防抖节流

跨标签页状态同步

BroadcastChannel通信 · storage事件监听 · 一致性冲突解决

跨标签页状态同步BroadcastCha…

状态机基本概念与设计模式

有限状态机定义 · 状态 · 事件

状态机基本概念设计模式

JavaScript状态机库XState入门

createMachine定义 · interpret解释器 · 状态图可视化

JavaScriptXState

手写简单状态机实现

class状态机 · 状态转移表 · 事件驱动

手写简单状态机实…class

嵌套状态机与并行状态

复合状态（compound） · 并行状态（parallel） · 内部转移与历史状态

嵌套状态机并行状态

状态机驱动的UI组件

useMachine hook · 状态对应渲染 · 动作触发副作用

UI状态机驱动的

状态机与Redux集成

redux状态机中间件 · dispatch事件驱动状态迁移 · 存储持久化

状态机与Vue reactivity结合

reactive状态对象 · watch监听状态变化 · XState vue绑定

多状态机协作

父子状态机通信 · 事件广播 · 服务注入

多状态机协作父子状态机通信

状态机单元测试

状态覆盖 · 事件序列测试 · 使用XState test模型生成路…

状态机单元测试状态覆盖

状态机可视化与调试

XState Inspector · 状态图导出 · 时间旅行调试

状态机可视化调试

页面恢复场景

刷新后还原全部状态（组件状态 · 滚动位置 · 表单输入）

页面恢复场景刷新后还原全部状…

Tab切换与浏览器返回/前进

visibilitychange事件 · 页面冻结（Page Lifecycl… · 历史记录管理

大规模表单状态保存

分步保存 · 草稿自动恢复 · 多页面间状态共享

大规模表单状态保…分步保存

状态更新批量处理 · requestAnimationFr… · 避免重复序列化

性能优化状态更新批量处理

常见错误与陷阱

循环序列化错误 · 存储配额溢出 · 异步恢复时序问题

常见错误陷阱

完整项目实战

React+Redux状态持久化+状… · 代码架构 · 调试日志

完整项目实战React+Redux