@jill64/svelte-storage

🗃️ Type-Safe Web Storage API Wrapper for Svelte

Installation

1npm i @jill64/svelte-storage

Simple Example

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

1<script>
2  import { storage } from '@jill64/svelte-storage'
3
4  /** @type {Writable<string>} */
5  const str = storage('localStorage-key', {
6    // Use sessionStorage instead of localStorage
7    // sessionStorage: boolean (default: false)
8  })
9
10  // Get value
11  $: consol.log($str)
12
13  // Set value
14  $str = 'value'
15  // or
16  str.set('value')
17</script>

Typed Storage

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

1<script>
2  import { storage } from '@jill64/svelte-storage'
3  import { number } from '@jill64/svelte-storage/serde'
4
5  /** @type {Writable<number>} */
6  const store = storage(
7    'localStorage-key',
8    {
9      stringify: (value) => value.toString(),
10      parse: (str) => parseInt(str)
11    }
12    // {
13    //  Storage Option
14    // }
15  )
16</script>

Prepared Converters

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

1<script>
2  import { storage } from '@jill64/svelte-storage'
3  import { number } from '@jill64/svelte-storage/serde'
4
5  /** @type {Writable<number>} */
6  const num = storage(
7    'localStorage-key',
8    number
9    // {
10    //  Storage Option
11    // }
12  )
13</script>

License

MIT