Create a Writable localStorage store that allows both updating and reading by subscription

storable.ts

import { writable } from 'svelte/store'

const storedKeys: any = {}

/**
 * Create a Writable localStorage store that allows both updating and reading by subscription
 */
export function storable<T>(initialValue: T) {
  const storedKey = `$-${Object.keys(storedKeys).length}`

  storedKeys[storedKey] = true

  const store = writable(initialValue)

  try {
    store.set(JSON.parse(localStorage.getItem(storedKey)!) || initialValue)
    store.subscribe(value => {
      localStorage.setItem(storedKey, JSON.stringify(value || initialValue))
    })
  } catch {}

  return store
}

Example usage:

<script>

  import { storable } from '$lib/storable.ts'

  // Value will be immediately available when page loads
  let email = storable('')

</script>

<div class="space-y-4">
  <input type="text" bind:value={$email} />
</div>