Persisted - Runed

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

Persisted allows for syncing and persisting state across browser sessions using localStorage or sessionStorage. Initialize Persisted by providing a unique key and an initial value for the state.

	<script lang="ts">
  import { Persisted } from "runed";
 
  const count = new Persisted("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>

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