Svelte Use

useStorage

Reactive LocalStorage/SessionStorage

Usage 

<script>
  import { useStorage } from '@svelte-use/core'

  // bind object
  const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' }) // returns Writable<object>

  // bind boolean
  const flag = useStorage('my-flag', true) // returns Writable<boolean>

  // bind number
  const count = useStorage('my-count', 0) // returns Writable<number>

  // bind string with SessionStorage
  const id = useStorage('my-id', 'some-string-id', sessionStorage) // returns Writable<string>

  // delete data from storage
  $state = null
</script>

Custom Serialization

By default, useStoragewill smartly use the corresponding serializer based on the data type of provided default value. For example, JSON.stringify / JSON.parse will be used for objects, Number.toString / parseFloat for numbers, etc.

You can also provide your own serialization function to useStorage

<script>
  import { useStorage } from '@svelte-use/core'

  useStorage(
    'key',
    {},
    {
      serializer: {
        read: (v: any) => v ? JSON.parse(v) : null,
        write: (v: any) => JSON.stringify(v),
      }
    }
  })
</script>

Please note when you provide null as the default value, useStoragecan't assume the data type from it. In this case, you can provide a custom serializer or reuse the built-in ones explicitly.

<script>
  import { useStorage, StorageSerializers } from '@svelte-use/core'

  const objectLike = useStorage('key', null, {
    serializer: StorageSerializers.object,
  })
  $objectLike = { foo: 'bar' }
</script>

Type Declarations 

export declare type Serializer<T> = {
  read(raw: string): T
  write(value: T): string
}
export declare const StorageSerializers: Record<
  "boolean" | "object" | "number" | "string" | "any",
  Serializer<any>
>
export declare type StorageLike = Pick<
  Storage,
  "getItem" | "setItem" | "removeItem"
>
export interface StorageOptions<T> extends ConfigurableWindow {
  /**
   * Listen to storage changes, useful for multiple tabs application
   *
   * @default true
   */
  listenToStorageChanges?: boolean
  /**
   * Custom data serialization
   */
  serializer?: Serializer<T>
  /**
   * On error callback
   *
   * Default lo error to `console.error`
   */
  onError?: (error: unknown) => void
}
export declare function useStorage(
  key: string,
  initialValue: MaybeWritable<string>,
  storage?: StorageLike,
  options?: StorageOptions<string>
): RemovableWritable<string>
export declare function useStorage(
  key: string,
  initialValue: MaybeWritable<boolean>,
  storage?: StorageLike,
  options?: StorageOptions<boolean>
): RemovableWritable<boolean>
export declare function useStorage(
  key: string,
  initialValue: MaybeWritable<number>,
  storage?: StorageLike,
  options?: StorageOptions<number>
): RemovableWritable<number>
export declare function useStorage<T>(
  key: string,
  initialValue: MaybeWritable<T>,
  storage?: StorageLike,
  options?: StorageOptions<T>
): RemovableWritable<T>
export declare function useStorage<T = unknown>(
  key: string,
  initialValue: MaybeWritable<null>,
  storage?: StorageLike,
  options?: StorageOptions<T>
): RemovableWritable<T>

Source

Source • Demo • Docs