跳到主要内容

usePersistedState()

function usePersistedState<T>(
namespace,
name,
initialValue
): PersistedState<T>;

Defined in: rxdb-react/src/use-persisted-state.ts:90

创建(或复用)一份持久化到 localStorage 的命名空间状态。

Type Parameters​

Type ParameterDescription
T状态值类型

Parameters​

ParameterTypeDescription
namespacestring状态命名空间
namestring键名;与 namespace 各自转义后组成持久化键
initialValueT仅首次注册生效的初值;盘上已有值时以盘上值为准

Returns​

PersistedState<T>

见 PersistedState

Throws​

同 namespace + name 此前以不同值类型注册过时,在渲染期抛出

Example​

const theme = usePersistedState('my-app', 'theme', 'dark');

return <button onClick={() => theme.setValue('light')}>{theme.value}</button>;

Remarks​

同 namespace + name 始终对应同一份状态:两个组件互相可见,一处写入另一处立刻重渲染, 也不会各自拿着陈旧副本互相覆盖盘上数据。后续调用传入的 initialValue 会被忽略, 但仍参与类型标签校验 —— 同 key 换值类型直接抛错,而不是静默串型。

namespace 与 name 可以包含任意字符:两者在持久化键里各自转义,不会互相串号; 含 : 或 % 的旧键在首次读取时一次性迁移到新键。

订阅走 useSyncExternalStore,因此在并发渲染与 StrictMode 下都不会读到撕裂的快照。 getServerSnapshot 与客户端读取共用同一个入口:非浏览器环境(SSR)下不读也不写 localStorage,状态退化成纯内存值,客户端 hydrate 后从盘上恢复。

暂不监听 storage 事件,因此不跨标签页同步。

三端等价实现:Angular usePersistedState(WritableSignal)、Vue usePersistedState(Ref)。持久化内核是共享的 @aiao/utils PersistedStateRegistry,键格式三端一致。