1---
2category: '@Integrations'
3---
4 
5# useIDBKeyval
6 
7Wrapper for [`idb-keyval`](https://www.npmjs.com/package/idb-keyval).
8 
9## Install idb-keyval as a peer dependency
10 
11```bash
12npm install idb-keyval@^6
13```
14 
15## Usage
16 
17```ts
18import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
19 
20// bind object
21const { data: storedObject, isFinished } = useIDBKeyval('my-idb-keyval-store', { hello: 'hi', greeting: 'Hello' })
22 
23// update object
24storedObject.value.hello = 'hola'
25 
26// bind boolean
27const flag = useIDBKeyval('my-flag', true) // returns Ref<boolean>
28 
29// bind number
30const count = useIDBKeyval('my-count', 0) // returns Ref<number>
31 
32// awaiting IDB transaction
33await count.set(10)
34console.log('IDB transaction finished!')
35 
36// delete data from idb storage
37storedObject.value = null
38```
39 
40## Type Declarations
41 
42```ts
43interface Serializer<T> {
44  read: (raw: unknown) => T
45  write: (value: T) => unknown
46}
47export interface UseIDBOptions<T> extends ConfigurableFlush {
48  /**
49   * Watch for deep changes
50   *
51   * @default true
52   */
53  deep?: boolean
54  /**
55   * On error callback
56   *
57   * Default log error to `console.error`
58   */
59  onError?: (error: unknown) => void
60  /**
61   * Use shallow ref as reference
62   *
63   * @default false
64   */
65  shallow?: boolean
66  /**
67   * Write the default value to the storage when it does not exist
68   *
69   * @default true
70   */
71  writeDefaults?: boolean
72  /**
73   * Custom data serialization
74   */
75  serializer?: Serializer<T>
76}
77export interface UseIDBKeyvalReturn<T> {
78  data: RemovableRef<T>
79  isFinished: ShallowRef<boolean>
80  set: (value: T) => Promise<void>
81}
82/**
83 *
84 * @param key
85 * @param initialValue
86 * @param options
87 */
88export declare function useIDBKeyval<T>(
89  key: IDBValidKey,
90  initialValue: MaybeRefOrGetter<T>,
91  options?: UseIDBOptions<T>,
92): UseIDBKeyvalReturn<T>
93```
94