sveltesvelte-store

How to persist svelte store


Is there any direct option to persist svelte store data so that even when the page is refreshed, data will be available.

I am not using local storage since I want the values to be reactive.


Solution

  • You can manually create a subscription to your store and persist the changes to localStorage and also use the potential value in localStorage as default value.

    Example

    <script>
      import { writable } from "svelte/store";
      const store = writable(localStorage.getItem("store") || "");
    
      store.subscribe(val => localStorage.setItem("store", val));
    </script>
    
    <input bind:value={$store} />