Skip to content
On this page

useIDBKeyval

Category
Export Size
Package
@vueuse/integrations
Last Changed
last month

Wrapper for idb-keyval.

Demo

Object
name: 'Banana'
color: 'Yellow'
size: 'Medium'
count: 0

String
foobar

Array
- 'foo'
- 'bar'
- 'baz'
Available in the @vueuse/integrations add-on.

Install idb-keyval as a peer dependency

bash
npm install idb-keyval
npm install idb-keyval

Usage

ts
import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'

// bind object
const storedObject = useIDBKeyval('my-idb-keyval-store', { hello: 'hi', greeting: 'Hello' })

// update object
storedObject.value.hello = 'hola'

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

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

// delete data from idb storage
storedObject.value = null
import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'

// bind object
const storedObject = useIDBKeyval('my-idb-keyval-store', { hello: 'hi', greeting: 'Hello' })

// update object
storedObject.value.hello = 'hola'

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

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

// delete data from idb storage
storedObject.value = null

Type Declarations

typescript
export interface UseIDBOptions extends ConfigurableFlush {
  /**
   * Watch for deep changes
   *
   * @default true
   */
  deep?: boolean
  /**
   * On error callback
   *
   * Default log error to `console.error`
   */
  onError?: (error: unknown) => void
  /**
   * Use shallow ref as reference
   *
   * @default false
   */
  shallow?: boolean
}
/**
 *
 * @param key
 * @param initialValue
 * @param options
 */
export declare function useIDBKeyval<T>(
  key: IDBValidKey,
  initialValue: MaybeComputedRef<T>,
  options?: UseIDBOptions
): RemovableRef<T>
export interface UseIDBOptions extends ConfigurableFlush {
  /**
   * Watch for deep changes
   *
   * @default true
   */
  deep?: boolean
  /**
   * On error callback
   *
   * Default log error to `console.error`
   */
  onError?: (error: unknown) => void
  /**
   * Use shallow ref as reference
   *
   * @default false
   */
  shallow?: boolean
}
/**
 *
 * @param key
 * @param initialValue
 * @param options
 */
export declare function useIDBKeyval<T>(
  key: IDBValidKey,
  initialValue: MaybeComputedRef<T>,
  options?: UseIDBOptions
): RemovableRef<T>

Source

SourceDemoDocs

Contributors

Changelog

v9.6.0 on 11/22/2022
1d841 - fix: incorrect value init set (#2416)
v9.5.0 on 11/9/2022
acd16 - feat: new integration - Idb-keyval wrapper (#2335)

Released under the MIT License.