reflex-client-persist-var 演示

为 Reflex 提供基于浏览器 localStorage 的持久化前端状态:

写入浏览器 localStorage 落盘:刷新、断网、重启浏览器都不丢

首帧直读本地数据:零后端往返、零网络延迟,无「主题闪烁」

同源标签页共享同一份数据:跨窗口、跨会话生效

完整的后端读写能力:push / retrieve / clear 双向同步

明暗外观跟随系统设置;为保护公开服务,每次后端操作间隔 ≥ 1 秒。

示例1 首屏读取

零后端往返
localStorageReact 首帧渲染
本地值 · localStorage

默认公告

页面加载时不访问后端;默认值在首帧渲染前注册,因此首帧即显示持久化值。

示例2 前端写入 + 交互式 Tag 编辑

字符串实时直写 localStorage;字典 / 列表用「输入框 + 添加按钮 + Tag」交互式构建,点击 Tag 显示删除按钮。

输入框localStorage
本地草稿

击键即写:set 直写 localStorage,随后 bump 强制重渲染。

示例3 后端推送

后端 → 前端
后端 statepush()localStorage前端渲染
服务端值 · state
初始公告 (服务端 state · 刷新即重置)
本地值 · localStorage

默认公告

琥珀色 = 服务端值(内存态,刷新即重置);绿色 = 本地值(已持久化,刷新仍在)。这就是持久化 vs 内存态的区别。

示例4 后端拉取

前端 → 后端
localStorageretrieve()后端回调
localStorage 数据源

默认公告

后端收到

(尚未拉取)

示例5 后端清除

后端 → localStorage
clear()删除 localStorage key回落默认值
清除后的值

默认公告

clear() 只删除 localStorage 中该 key;默认值仍通过 register() 在首帧生效,因此清除后立刻回落显示默认值。

Built with Reflex