PersistedState
Create reactive state that is persisted and synchronized across browser sessions and tabs using Web Storage.
Demo
Count: 0
Note
You can refresh this page and/or open it in another tab to see the count state being persisted and synchronized across sessions and tabs.
Usage
PersistedState
allows for syncing and persisting state across browser sessions using localStorage
or sessionStorage
. Initialize PersistedState
by providing a unique key and an
initial value for the state.
<script lang="ts">
import { PersistedState } from "runed";
const count = new PersistedState("count", 0);
</script>
<div>
<button onclick={() => count.current++}>Increment</button>
<button onclick={() => count.current--}>Decrement</button>
<button onclick={() => (count.current = 0)}>Reset</button>
<p>Count: {count.current}</p>
</div>
PersistedState
also includes an options
object.
{
storage: 'session', // Specifies whether to use local or session storage. Default is 'local'.
syncTabs: false, // Indicates if changes should sync across tabs. Default is true.
serializer: {
serialize: superjson.stringify, // Custom serialization function. Default is JSON.stringify.
deserialize: superjson.parse // Custom deserialization function. Default is JSON.parse.
}
}