svelte-storage Svelte Themes

Svelte Storage

šŸ—ƒļø Type-Safe Web Storage API Wrapper for Svelte

@jill64/svelte-storage

npm-version npm-license npm-download-month npm-min-size ci.yml

šŸ—ƒļø 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'
  import { string } from '@jill64/svelte-storage/serde'

  const storage = storage(
    { ['localStorage-key']: string },
    {
      // Use sessionStorage instead of localStorage
      // sessionStorage: boolean (default: false)
    }
  )

  // Get value
  consol.log(storage['localStorage-key'])

  // Set value
  storage['localStorage-key'] = 'value'
</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'

  const storage = storage(
    { ['localStorage-key']: number }
    // {
    //  Storage Option
    // }
  )
</script>

Custom Converter

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'

  const store = storage(
    {
      ['localStorage-key']: {
        stringify: (value) => value.toString(),
        parse: (str) => parseInt(str)
      }
    }
    // {
    //  Storage Option
    // }
  )
</script>

License

MIT

Top categories

Loading Svelte Themes