dexie vs idb vs localforage
JavaScript IndexedDB Libraries
Search packages..
dexieidblocalforageSimilar Packages:

JavaScript IndexedDB Libraries

JavaScript IndexedDB libraries provide developers with a simplified API for interacting with the IndexedDB database, which is a low-level API for client-side storage of significant amounts of structured data. These libraries abstract the complexities of the IndexedDB API, making it easier to perform CRUD operations, manage transactions, and handle asynchronous data storage. They are particularly useful in web applications that require offline capabilities, data persistence, and improved performance by reducing server requests.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
dexie014,1653.23 MB5899 hours agoApache-2.0
idb07,29582.8 kB57a year agoISC
localforage025,769-2495 years agoApache-2.0

Feature Comparison: dexie vs idb vs localforage

API Complexity

  • dexie:

    Dexie offers a rich and fluent API that simplifies complex queries and data manipulation. It abstracts the intricacies of IndexedDB, allowing developers to perform operations using a more intuitive syntax, making it easier to manage data relationships and transactions.

  • idb:

    idb provides a minimalistic API that closely resembles the native IndexedDB API. While it simplifies the promise-based handling of asynchronous operations, developers still need to manage the underlying complexity of IndexedDB directly, which may require a deeper understanding of its mechanics.

  • localforage:

    LocalForage abstracts away the complexities of different storage backends, providing a simple and consistent API for data storage. It allows developers to interact with various storage mechanisms without worrying about the underlying implementation details.

Performance

  • dexie:

    Dexie is optimized for performance, especially when dealing with large datasets and complex queries. It uses an efficient indexing system and supports bulk operations, which can significantly enhance the speed of data retrieval and manipulation.

  • idb:

    idb's performance is closely tied to the native IndexedDB implementation. While it is efficient for most use cases, developers need to be mindful of how they structure their data and queries to avoid performance bottlenecks, particularly with large datasets.

  • localforage:

    LocalForage automatically selects the best storage option available, optimizing performance based on the backend used. It provides a seamless experience for developers, but performance may vary depending on the underlying storage mechanism.

Data Persistence

  • dexie:

    Dexie provides robust data persistence features, allowing developers to easily manage data versions and migrations. It supports transactions, ensuring data integrity during complex operations, which is crucial for applications that require reliable data storage.

  • idb:

    idb allows for direct interaction with IndexedDB, providing strong data persistence capabilities. However, developers must implement their own versioning and migration strategies, which can add complexity to the application.

  • localforage:

    LocalForage ensures data persistence across different storage backends, making it easy to store and retrieve data regardless of the user's browser capabilities. It provides a consistent experience for data persistence, even if the underlying storage changes.

Browser Compatibility

  • dexie:

    Dexie is designed to work across all modern browsers, including mobile and desktop environments. It gracefully handles browser compatibility issues and provides fallbacks where necessary, ensuring a consistent experience for users.

  • idb:

    idb is compatible with modern browsers that support IndexedDB. However, developers need to be cautious about older browsers that may not fully support the IndexedDB API, requiring additional handling for compatibility.

  • localforage:

    LocalForage is built to provide a consistent API across different storage backends, ensuring compatibility with a wide range of browsers. It automatically falls back to localStorage when IndexedDB is not available, making it a versatile choice for cross-browser applications.

Learning Curve

  • dexie:

    Dexie has a moderate learning curve, especially for developers familiar with JavaScript promises and asynchronous programming. Its fluent API makes it easier to grasp, but understanding IndexedDB concepts is still beneficial for advanced usage.

  • idb:

    idb has a steeper learning curve due to its close resemblance to the native IndexedDB API. Developers need to understand the intricacies of IndexedDB to use it effectively, which may require more time and effort to learn.

  • localforage:

    LocalForage has a low learning curve, making it accessible for developers of all skill levels. Its simple API allows for quick implementation, making it an excellent choice for those new to client-side storage.

How to Choose: dexie vs idb vs localforage

  • dexie:

    Choose Dexie if you need a powerful and easy-to-use wrapper around IndexedDB that provides a fluent API and supports advanced features like versioning, indexing, and transactions. It is ideal for applications that require complex queries and data manipulation.

  • idb:

    Choose idb if you prefer a minimalistic and lightweight library that closely follows the native IndexedDB API. It is suitable for developers who want to maintain a low-level control over their database interactions while still benefiting from a promise-based interface.

  • localforage:

    Choose LocalForage if you need a library that provides a simple API for storing data in multiple storage backends (IndexedDB, WebSQL, and localStorage) with a consistent interface. It is ideal for applications that require flexibility in storage options and want to seamlessly fall back to localStorage if IndexedDB is not available.

Similar Npm Packages to dexie

dexie is a powerful wrapper for IndexedDB, designed to simplify the process of working with client-side databases in web applications. It provides a straightforward API for performing CRUD operations, handling transactions, and managing complex queries, making it easier for developers to interact with IndexedDB without dealing with its verbose and complex native API. Dexie supports features like versioning, schema migrations, and reactive queries, making it a popular choice for developers looking to implement offline storage solutions in their applications.

One notable alternative to Dexie is idb. The idb library is a small, simple, and lightweight wrapper around the IndexedDB API. It aims to provide a more user-friendly interface while maintaining the performance and capabilities of the native IndexedDB. idb is particularly useful for developers who prefer a minimalistic approach and want to work directly with promises rather than callbacks. While it may not offer all the advanced features of Dexie, it is a great choice for simpler use cases where a lightweight solution is sufficient.

For a detailed comparison of these two libraries, you can check out the following link: Comparing dexie vs idb.

Similar Npm Packages to idb

idb is a small and simple library that provides a convenient way to interact with IndexedDB, a low-level API for client-side storage of significant amounts of structured data. It simplifies the complexities of using IndexedDB by providing a promise-based API that makes it easier to work with. This makes it an excellent choice for developers looking to implement client-side storage solutions in their web applications without getting bogged down by the intricacies of the underlying API.

While idb is a great option for managing IndexedDB, there are other libraries that also facilitate similar functionalities. Here are a few alternatives:

  • dexie is a powerful wrapper for IndexedDB that provides a more feature-rich and developer-friendly API. It offers a simple syntax for querying and managing data, supports transactions, and provides advanced features like versioning and schema migrations. If you need a more robust solution with additional capabilities for managing your data, dexie is an excellent choice. Its extensive documentation and community support make it a popular option for developers looking to leverage IndexedDB effectively.

  • localforage is another library that provides a simple API for storing data in the browser. It abstracts away the complexities of different storage mechanisms, including IndexedDB, WebSQL, and localStorage, allowing developers to use a consistent API regardless of the underlying storage technology. If you require a cross-browser solution that automatically selects the best storage option available, localforage is a great choice. It is particularly useful for applications that need to store data offline and provide a seamless user experience.

To see how idb compares with dexie and localforage, check out the comparison: Comparing dexie vs idb vs localforage.

Similar Npm Packages to localforage

localforage is a powerful library that provides a simple API for storing data in the browser using asynchronous storage. It abstracts the complexities of different storage mechanisms, such as IndexedDB, WebSQL, and localStorage, allowing developers to store data in a more flexible and efficient manner. With localforage, you can easily store and retrieve data without worrying about the underlying implementation, making it a popular choice for web applications that require offline capabilities and persistent storage.

While localforage is a robust solution for client-side storage, there are alternatives that offer similar functionalities. Here are a couple of noteworthy options:

  • dexie is a wrapper library for IndexedDB that provides a more developer-friendly API. It simplifies the process of working with IndexedDB by offering a promise-based interface and powerful querying capabilities. Dexie allows you to define your database schema and provides features like transactions, versioning, and advanced queries, making it an excellent choice for applications that require complex data storage and retrieval operations. If you are looking for a more structured way to interact with IndexedDB, dexie is a strong alternative to localforage.

  • idb-keyval is a minimalistic library that simplifies the use of IndexedDB by providing a simple key-value store. It is built on top of the native IndexedDB API and offers a straightforward API for storing and retrieving data. idb-keyval is particularly useful for projects that require a lightweight solution for key-value storage without the overhead of a more complex library. If your application needs basic data storage capabilities with minimal setup, idb-keyval is a great option.

To see how localforage compares with dexie and idb-keyval, check out the comparison: Comparing dexie vs idb-keyval vs localforage.

README for dexie

Dexie.js

NPM Version Build Status Join our Discord

Dexie.js is a wrapper library for indexedDB - the standard database in the browser. https://dexie.org.

Why Dexie.js?

IndexedDB is the portable database for all browser engines. Dexie.js makes it fun and easy to work with.

But also:

  • Dexie.js is widely used by 100,000 of web sites, apps and other projects and supports all browsers, Electron for Desktop apps, Capacitor for iOS / Android apps and of course pure PWAs.
  • Dexie.js works around bugs in the IndexedDB implementations, giving a more stable user experience.
  • Need sync? Dexie Cloud adds real-time sync, auth, and collaboration on top of Dexie.js β€” no backend needed.

Hello World (vanilla JS)

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      // Import Dexie
      import { Dexie } from 'https://unpkg.com/dexie/dist/modern/dexie.mjs';

      //
      // Declare Database
      //
      const db = new Dexie('FriendDatabase');
      db.version(1).stores({
        friends: '++id, age'
      });

      //
      // Play with it
      //
      try {
        await db.friends.add({ name: 'Alice', age: 21 });

        const youngFriends = await db.friends
            .where('age')
            .below(30)
            .toArray();

        alert(`My young friends: ${JSON.stringify(youngFriends)}`);
      } catch (e) {
        alert(`Oops: ${e}`);
      }
    </script>
  </head>
</html>

Yes, it's that simple. Read the docs to get into the details.

Hello World (legacy script tags)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/dexie/dist/dexie.js"></script>
    <script>

      //
      // Declare Database
      //
      const db = new Dexie('FriendDatabase');
      db.version(1).stores({
        friends: '++id, age'
      });

      //
      // Play with it
      //
      db.friends.add({ name: 'Alice', age: 21 }).then(() => {
        return db.friends
          .where('age')
          .below(30)
          .toArray();
      }).then(youngFriends => {
        alert (`My young friends: ${JSON.stringify(youngFriends)}`);
      }).catch (e => {
        alert(`Oops: ${e}`);
      });

    </script>
  </head>
</html>

Hello World (React + Typescript)

Real-world apps are often built using components in various frameworks. Here's a version of Hello World written for React and Typescript. There are also links below this sample to more tutorials for different frameworks...

import React from 'react';
import { Dexie, type EntityTable } from 'dexie';
import { useLiveQuery } from 'dexie-react-hooks';

// Typing for your entities (hint is to move this to its own module)
export interface Friend {
  id: number;
  name: string;
  age: number;
}

// Database declaration (move this to its own module also)
export const db = new Dexie('FriendDatabase') as Dexie & {
  friends: EntityTable<Friend, 'id'>;
};
db.version(1).stores({
  friends: '++id, age',
});

// Component:
export function MyDexieReactComponent() {
  const youngFriends = useLiveQuery(() =>
    db.friends
      .where('age')
      .below(30)
      .toArray()
  );

  return (
    <>
      <h3>My young friends</h3>
      <ul>
        {youngFriends?.map((f) => (
          <li key={f.id}>
            Name: {f.name}, Age: {f.age}
          </li>
        ))}
      </ul>
      <button
        onClick={() => {
          db.friends.add({ name: 'Alice', age: 21 });
        }}
      >
        Add another friend
      </button>
    </>
  );
}

Tutorials for React, Svelte, Vue, Angular and vanilla JS

API Reference

Samples

Performance

Dexie has kick-ass performance. Its bulk methods take advantage of a lesser-known feature in IndexedDB that makes it possible to store stuff without listening to every onsuccess event. This speeds up the performance to a maximum.

Supported operations

above(key): Collection;
aboveOrEqual(key): Collection;
add(item, key?): Promise;
and(filter: (x) => boolean): Collection;
anyOf(keys[]): Collection;
anyOfIgnoreCase(keys: string[]): Collection;
below(key): Collection;
belowOrEqual(key): Collection;
between(lower, upper, includeLower?, includeUpper?): Collection;
bulkAdd(items: Array): Promise;
bulkDelete(keys: Array): Promise;
bulkPut(items: Array): Promise;
clear(): Promise;
count(): Promise;
delete(key): Promise;
distinct(): Collection;
each(callback: (obj) => any): Promise;
eachKey(callback: (key) => any): Promise;
eachPrimaryKey(callback: (key) => any): Promise;
eachUniqueKey(callback: (key) => any): Promise;
equals(key): Collection;
equalsIgnoreCase(key): Collection;
filter(fn: (obj) => boolean): Collection;
first(): Promise;
get(key): Promise;
inAnyRange(ranges): Collection;
keys(): Promise;
last(): Promise;
limit(n: number): Collection;
modify(changeCallback: (obj: T, ctx:{value: T}) => void): Promise;
modify(changes: { [keyPath: string]: any } ): Promise;
noneOf(keys: Array): Collection;
notEqual(key): Collection;
offset(n: number): Collection;
or(indexOrPrimayKey: string): WhereClause;
orderBy(index: string): Collection;
primaryKeys(): Promise;
put(item: T, key?: Key): Promise;
reverse(): Collection;
sortBy(keyPath: string): Promise;
startsWith(key: string): Collection;
startsWithAnyOf(prefixes: string[]): Collection;
startsWithAnyOfIgnoreCase(prefixes: string[]): Collection;
startsWithIgnoreCase(key: string): Collection;
toArray(): Promise;
toCollection(): Collection;
uniqueKeys(): Promise;
until(filter: (value) => boolean, includeStopEntry?: boolean): Collection;
update(key: Key, changes: { [keyPath: string]: any }): Promise;

This is a mix of methods from WhereClause, Table and Collection. Dive into the API reference to see the details.

Dexie Cloud

Dexie Cloud is the easiest way to add sync, authentication, and real-time collaboration to your Dexie app. You keep writing frontend code with Dexie.js β€” Dexie Cloud handles the rest.

What you get:

  • πŸ”„ Sync across devices β€” changes propagate in real time, no polling needed
  • πŸ” Authentication β€” built-in user auth, no identity provider required
  • πŸ›‘οΈ Access control β€” share data between users with fine-grained permissions
  • πŸ“ File & blob storage β€” store attachments alongside your structured data
  • ✈️ Offline-first β€” works fully offline, syncs when back online

Getting started is just a few lines:

npm install dexie-cloud-addon

import Dexie from 'dexie';
import dexieCloud from 'dexie-cloud-addon';

const db = new Dexie('MyDatabase', { addons: [dexieCloud] });
db.version(1).stores({ items: '@id, title' });
db.cloud.configure({ databaseUrl: 'https://<your-db>.dexie.cloud' });

That's it. Your existing Dexie app now syncs. Hosted cloud or self-hosted on your own infrastructure. πŸ‘‹

β†’ Quickstart guide

Sample app:

Source: Dexie Cloud To-do app

Live demo: https://dexie.github.io/Dexie.js/dexie-cloud-todo-app/

Samples

https://dexie.org/docs/Samples

https://github.com/dexie/Dexie.js/tree/master/samples

Knowledge Base

https://dexie.org/docs/Questions-and-Answers

Website

https://dexie.org

Install via npm

npm install dexie

Download

For those who don't like package managers, here's the download links:

UMD (for legacy script includes as well as commonjs require):

https://unpkg.com/dexie@latest/dist/dexie.min.js

https://unpkg.com/dexie@latest/dist/dexie.min.js.map

Modern (ES module):

https://unpkg.com/dexie@latest/dist/modern/dexie.min.mjs

https://unpkg.com/dexie@latest/dist/modern/dexie.min.mjs.map

Typings:

https://unpkg.com/dexie@latest/dist/dexie.d.ts

Contributing

See CONTRIBUTING.md

Build

pnpm install
pnpm run build

Test

pnpm test

Watch

pnpm run watch

Browser testing via
TestMu AI (Formerly LambdaTest)

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.