sv-store

A Svelte library for creating and managing persistent stores using localStorage or sessionStorage

usage

First define your store

export type ExampleState = {
  value?: string
}

let value: ExampleState['value'] = $state()

export const useExampleStore: () => ExampleState = () => {
  return {
    get value() {
      return value
    },
    set value(to) {
      value = to
    },
  }
}

Then register it once in your main file or root layout file

import { registerStore } from 'sv-store'
import { useExampleStore } from './exampleStore.svelte.ts'

// will be saved to local storage as `sv-store:example`
registerStore('example', useExampleStore())

The store can also be saved in session storage or use a different prefix

registerStore('example', useExampleStore(), {
  prefix: 'store', // or set prefix to `null` for no prefix at all
  type: 'sessionStorage',
})

And use it throughtout your app and components

import { useExampleStore } from './exampleStore.svelte.ts'

let exampleStore = useExampleStore()