npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wmhilton/idb-keyval

v3.3.0

Published

A super-simple-small keyval store built on top of IndexedDB

Downloads

55

Readme

IDB-Keyval (fork)

npm size

This is a super-simple-small promise-based keyval store implemented with IndexedDB, largely based on async-storage by Mozilla.

localForage offers similar functionality, but supports older browsers with broken/absent IDB implementations. Because of that, it's 7.4k, whereas idb-keyval is < 600 bytes. Also, it's tree-shaking friendly, so you'll probably end up using fewer than 500 bytes. Pick whichever works best for you!

This is only a keyval store. If you need to do more complex things like iteration & indexing, check out IDB on NPM (a little heavier at 1.7k). The first example in its README is how to recreate this library.

Usage

set:

import { set } from 'idb-keyval';

set('hello', 'world');
set('foo', 'bar');

Since this is IDB-backed, you can store anything structured-clonable (numbers, arrays, objects, dates, blobs etc).

All methods return promises:

import { set } from 'idb-keyval';

set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch(err => console.log('It failed!', err));

get:

import { get } from 'idb-keyval';

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

If there is no 'hello' key, then val will be undefined.

keys:

import { keys } from 'idb-keyval';

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

del:

import { del } from 'idb-keyval';

del('hello');

clear:

import { clear } from 'idb-keyval';

clear();

close:

Closes the IDB connection. May be useful to handle when the page is frozen. The connection is reopened automatically the next time any other API is called.

import { close } from 'idb-keyval';

close();

Custom stores:

By default, the methods above use an IndexedDB database named keyval-store and an object store named keyval. You can create your own store, and pass it as an additional parameter to any of the above methods:

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

const customStore = new Store('custom-db-name', 'custom-store-name');
set('foo', 'bar', customStore);

That's it!

Installing

Via npm + webpack/rollup

npm install idb-keyval

Now you can require/import idb-keyval:

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

If you're targeting older versions of IE, you may have more luck with:

const idb = require('idb-keyval/dist/idb-keyval-cjs-compat.min.js');

Via <script>

  • dist/idb-keyval.mjs is a valid JS module.
  • dist/idb-keyval-iife.js can be used in browsers that don't support modules. idbKeyval is created as a global.
  • dist/idb-keyval-iife.min.js As above, but minified.
  • dist/idb-keyval-iife-compat.min.js As above, but works in older browsers such as IE 10.
  • dist/idb-keyval-amd.js is an AMD module.
  • dist/idb-keyval-amd.min.js As above, but minified.

These built versions are also available on jsDelivr, e.g.:

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

Updating from 2.x

2.x exported an object with methods:

// This no longer works in 3.x
import idbKeyval from 'idb-keyval';

idbKeyval.set('foo', 'bar');

Whereas in 3.x you import the methods directly:

import { set } from 'idb-keyval';

set('foo', 'bar');

This is better for minification, and allows tree shaking.