Persist Svelte store in localstorage

· Björn-Eric's Developer notes

Svelte stores are awesome, and sometimes you want to keep them around a bit longer. Here, we use localstorage.

 1import { writable } from "svelte/store";
 2import type { IProduct } from "$lib/types";
 3
 4export const storeName = "dailies";
 5
 6let initValue: IProduct[] = [];
 7
 8// Load Store from localstorage
 9if (typeof window !== "undefined") {
10  const storedStore = localStorage.getItem(storeName);
11  if (storedStore && storedStore !== "[]") {
12    initValue = JSON.parse(storedStore);
13  }
14}
15
16export const dailies = writable<IProduct[]>([...initValue]);
17
18// Persist store in localstorage
19dailies.subscribe((val) => {
20  if (typeof window !== "undefined") {
21    localStorage.setItem(storeName, JSON.stringify(val));
22  }
23});

But what if we want to create lots of stores? #

Let's make our store creation it into a function:

 1import { writable } from "svelte/store";
 2
 3export function createStore<T>(storeName: string, initValue: T) {
 4  // Load Store from localstorage
 5  if (typeof window !== "undefined") {
 6    const storedStore = localStorage.getItem(storeName);
 7    if (storedStore && storedStore !== "[]") {
 8      initValue = JSON.parse(storedStore);
 9    }
10  }
11
12  const store = writable<T>(initValue);
13
14  // Persist store in localstorage
15  store.subscribe((val) => {
16    if (typeof window !== "undefined") {
17      localStorage.setItem(storeName, JSON.stringify(val));
18    }
19  });
20
21  return store;
22}

We now have a store creation function that takes two arguments, 1. the name of the store and 2. an initial store value. We can use it like this:

 1// demoStore.ts
 2import { createStore } from "./createStore";
 3
 4export type Demo = {
 5  name: string;
 6};
 7
 8export const demo = createStore<Demo[]>("demoStore", []);
 9
10// Mutation functions related to store
11export function addDemo(name: string) {
12  demo.update((draft) => {
13    const next = [...draft];
14    next.push({ name });
15    return next;
16  });
17}

Home