idb-keyval

If targeting older browsers like IE10/11, use the compat build and ensure you import a Promise polyfill.

// Import a Promise polyfill
import 'es6-promise/auto';
import { get, set } from 'idb-keyval/compat';

By default, idb-keyval uses the database name keyval-store and the store name keyval. To use different names, use the createStore function. This function returns a customStore object that can be passed as the final argument to all idb-keyval methods (like set, get, del, etc.).

Limitations:

• createStore cannot create multiple stores within the same database.
• createStore cannot create a store within an existing database.
• If you need to manage multiple stores in one database or handle complex schema migrations, use IDB on NPM instead.

import { set, createStore } from 'idb-keyval';

const customStore = createStore('custom-db-name', 'custom-store-name');

set('hello', 'world', customStore);

Install the package using npm to use it with bundlers like webpack, rollup, or parcel.

npm install idb-keyval

You can load the library directly in the browser using jsDelivr.

UMD (Legacy):

<script src="https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/umd.js"></script>

ES Module (Modern):

<script type="module">
  import { get, set } from 'https://cdn.jsdelivr.net/npm/idb-keyval@6/+esm';
</script>

<script src="https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/umd.js"></script>
<!-- Or in modern browsers: -->
<script type="module">
  import { get, set } from 'https://cdn.jsdelivr.net/npm/idb-keyval@6/+esm';
</script>

For modern environments, import the specific methods you need from idb-keyval.

import { get, set } from 'idb-keyval';

• del(key): Deletes a specific key.
• delMany(keys): Deletes multiple keys at once, which is more efficient than calling del multiple times.

import { del, delMany } from 'idb-keyval';

del('hello');

delMany([123, 'hello'])
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

To avoid race conditions when transforming a value (e.g., incrementing a counter), use update(key, transformFn). This automatically queues updates so they are processed sequentially and safely.

import { update } from 'idb-keyval';

update('counter', (val) => (val || 0) + 1);
update('counter', (val) => (val || 0) + 1);

The get(key) method retrieves the value associated with the provided key. If the key does not exist, the promise resolves to undefined.

import { get } from 'idb-keyval';

// logs: "world"
get('hello').then((val) => console.log(val));

• entries(): Returns an array of all [key, value] pairs in the store.
• keys(): Returns an array of all keys in the store.
• values(): Returns an array of all values in the store.

import { entries, keys, values } from 'idb-keyval';

// logs: [[123, 456], ['hello', 'world']]
entries().then((entries) => console.log(entries));

// logs: [123, 'hello']
keys().then((keys) => console.log(keys));

// logs: [456, 'world']
values().then((values) => console.log(values));

The clear() method removes all values from the store.

import { clear } from 'idb-keyval';

clear();

Use setMany and getMany for better performance when dealing with multiple keys.

• setMany(entries): Takes an array of [key, value] pairs. This operation is atomic; if one pair fails, none are added.
• getMany(keys): Takes an array of keys and resolves with an array of values.