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.
	}
}