@jill64/svelte-storage

svelte-storage

🗃️ Type-Safe Web Storage API Wrapper for Svelte

Installation

npm i @jill64/svelte-storage

Simple Example

Passing the localStorage key to the storage function will retrieve the svelte-store of that value.

<script>
  import { storage } from '@jill64/svelte-storage'

  /** @type {Writable<string>} */
  const str = storage('localStorage-key', {
    // Use sessionStorage instead of localStorage
    // sessionStorage: boolean (default: false)
  })

  // Get value
  $: consol.log($str)

  // Set value
  $str = 'value'
  // or
  str.set('value')
</script>

Typed Storage

By passing a conversion function as the second argument, you can get the value converted to any type.

<script>
  import { storage } from '@jill64/svelte-storage'
  import { number } from '@jill64/svelte-storage/serde'

  /** @type {Writable<number>} */
  const store = storage(
    'localStorage-key',
    {
      stringify: (value) => value.toString(),
      parse: (str) => parseInt(str)
    }
    // {
    //  Storage Option
    // }
  )
</script>

Prepared Converters

You can also use the prepared converters in @jill64/svelte-storage/serde.

<script>
  import { storage } from '@jill64/svelte-storage'
  import { number } from '@jill64/svelte-storage/serde'

  /** @type {Writable<number>} */
  const num = storage(
    'localStorage-key',
    number
    // {
    //  Storage Option
    // }
  )
</script>