Storage demo — hayley-ssg-template

Storage

Persist UI state with dioxus_sdk_storage::use_persistent — paired here with rand and a small todo list.

SSG & hydration

Build / SSG: There is no browser storage on the server. use_persistent renders the init value (empty history, empty todos) into static HTML in public/.

First load in the browser: With the fullstack feature, dioxus-sdk-storage hydrates from storage after the initial paint via use_hydrate_storage — so saved data may appear a moment after load without breaking hydration.

Client-side navigation: Opening /demo/storage from the nav mounts in WASM only; hooks read storage immediately and show saved state.

Do not call localStorage directly in render for live values — use use_persistent (or load in use_effect if you roll your own).

Random history (persistent)

Each click appends rand::rng().random::<u32>() and keeps the newest 10 values in use_persistent (sessionStorage via dioxus-sdk-storage).

No numbers yet — generate one, reload the page, and they should still be here.

Todo list (persistent)

Add with the button or Enter. Toggle done, delete, reload — tasks stay in storage.

No tasks yet.

Tips

Stored types need Serialize, Deserialize, Clone, and PartialEq — wrap structs in serde derives.
Use stable, versioned keys (this demo uses hayley-ssg-template/demo/…) so you can migrate or reset without clobbering unrelated apps on localhost.
For cross-tab sync, see use_synced_storage in the same crate; use_persistent is enough for per-tab reload persistence.
On native/desktop targets, persistent storage uses files under a config directory — see set_dir in the crate docs.
Random bytes that must not appear in SSG HTML still belong in use_effect or click handlers (see the /demo/random demo page).