Skip to content

useIDBKeyval

Category
Export Size
525 B
Package
@vueuse/integrations
Last Changed
3 months ago

Wrapper for idb-keyval.

Demo

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

String
{
  "isFinished": true,
  "data": "foobar"
}

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

Install idb-keyval as a peer dependency

bash
npm install idb-keyval@^6

Usage

ts
import { 
useIDBKeyval
} from '@vueuse/integrations/useIDBKeyval'
// bind object const {
data
:
storedObject
,
isFinished
} =
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>
// awaiting IDB transaction await
count
.
set
(10)
console
.
log
('IDB transaction finished!')
// delete data from idb storage
storedObject
.
value
= null

Type Declarations

ts
interface 
Serializer
<
T
> {
read
: (
raw
: unknown) =>
T
write
: (
value
:
T
) => unknown
} export interface
UseIDBOptions
<
T
> 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
/** * Write the default value to the storage when it does not exist * * @default true */
writeDefaults
?: boolean
/** * Custom data serialization */
serializer
?:
Serializer
<
T
>
} export interface
UseIDBKeyvalReturn
<
T
> {
data
:
RemovableRef
<
T
>
isFinished
:
ShallowRef
<boolean>
set
: (
value
:
T
) =>
Promise
<void>
} /** * * @param key * @param initialValue * @param options */ export declare function
useIDBKeyval
<
T
>(
key
:
IDBValidKey
,
initialValue
:
MaybeRefOrGetter
<
T
>,
options
?:
UseIDBOptions
<
T
>,
):
UseIDBKeyvalReturn
<
T
>

Source

SourceDemoDocs

Contributors

Anthony Fu
IlyaL
Anthony Fu
NoiseFan
IlyaL
Matthew
Robin
OrbisK
Fernando Fernández
Oleksandr Hyriavets
Doctorwu
Abdallah Alhaddad
Jimmy Sullivan
sun0day
Harmony Scarlet

Changelog

v13.6.0 on
bb831 - feat: add options.serializer (#4781)
v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.3.0 on
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.9.0 on
1b67d - fix: use toRaw instead of overriding the original object (#3805)
v10.8.0 on
a086e - fix: stricter types
v10.4.0 on
77a86 - feat(useIdbKeyval): ability to wait for IDB writes (#3338)

Released under the MIT License.

Write AI-Powered code you can trust
Grab 45% off for AIDD Masterclass before it's gone.
Claim Now
09
hours
:
33
minutes
:
15
seconds
: