Dexie.js

A Minimalistic Wrapper for IndexedDB

Browser storage
dexie/Dexie.jsdexie.orgdexie

README

Dexie.js
========
[![NPM Version][npm-image]][npm-url] Build StatusTested with Browserstack

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

Why?

Dexie solves three main issues with the native IndexedDB API:

1. Ambiguous error handling
2. Poor queries
3. Code complexity

Dexie provides a neat database API with a well thought-through API design, robust error handling, extendability, change tracking awareness and extended KeyRange support (case insensitive search, set matches and OR operations).

Hello World


  1. ``` html
  2. <!doctype html>
  3. <html>
  4.  <head>
  5.   <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
  6.   <script>
  7.    //
  8.    // Declare Database
  9.    //
  10.    var db = new Dexie("FriendDatabase");
  11.    db.version(1).stores({
  12.      friends: "++id,name,age"
  13.    });
  15.    //
  16.    // Manipulate and Query Database
  17.    //
  18.    db.friends.add({name: "Josephine", age: 21}).then(function() {
  19.        return db.friends.where("age").below(25).toArray();
  20.    }).then(function (youngFriends) {
  21.        alert ("My young friends: " + JSON.stringify(youngFriends));
  22.    }).catch(function (e) {
  23.        alert ("Error: " + (e.stack || e));
  24.    });
  25.   </script>
  26.  </head>
  27. </html>
  28. ```
Yes, it's that simple.

An equivalent modern version (works in all modern browsers):

  1. ``` html
  2. <!doctype html>
  3. <html>
  4.  <head>
  5.   <script type="module">
  6.    import Dexie from "https://unpkg.com/dexie@latest/dist/modern/dexie.mjs";
  7.    //
  8.    // Declare Database
  9.    //
  10.    const db = new Dexie("FriendDatabase");
  11.    db.version(1).stores({
  12.      friends: "++id,name,age"
  13.    });
  15.    //
  16.    // Manipulate and Query Database
  17.    //
  18.    try {
  19.      await db.friends.add({name: "Josephine", age: 21});
  20.      const youngFriends = await db.friends.where("age").below(25).toArray();
  21.      alert (`My young friends: ${JSON.stringify(youngFriends)}`);
  22.    } catch (e) {
  23.      alert (`Error: ${e}`);
  24.    }
  25.   </script>
  26.  </head>
  27. </html>
  28. ```

Tutorial

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

  1. ``` js
  2. above(key): Collection;
  3. aboveOrEqual(key): Collection;
  4. add(item, key?): Promise;
  5. and(filter: (x) => boolean): Collection;
  6. anyOf(keys[]): Collection;
  7. anyOfIgnoreCase(keys: string[]): Collection;
  8. below(key): Collection;
  9. belowOrEqual(key): Collection;
  10. between(lower, upper, includeLower?, includeUpper?): Collection;
  11. bulkAdd(items: Array): Promise;
  12. bulkDelete(keys: Array): Promise;
  13. bulkPut(items: Array): Promise;
  14. clear(): Promise;
  15. count(): Promise;
  16. delete(key): Promise;
  17. distinct(): Collection;
  18. each(callback: (obj) => any): Promise;
  19. eachKey(callback: (key) => any): Promise;
  20. eachPrimaryKey(callback: (key) => any): Promise;
  21. eachUniqueKey(callback: (key) => any): Promise;
  22. equals(key): Collection;
  23. equalsIgnoreCase(key): Collection;
  24. filter(fn: (obj) => boolean): Collection;
  25. first(): Promise;
  26. get(key): Promise;
  27. inAnyRange(ranges): Collection;
  28. keys(): Promise;
  29. last(): Promise;
  30. limit(n: number): Collection;
  31. modify(changeCallback: (obj: T, ctx:{value: T}) => void): Promise;
  32. modify(changes: { [keyPath: string]: any } ): Promise;
  33. noneOf(keys: Array): Collection;
  34. notEqual(key): Collection;
  35. offset(n: number): Collection;
  36. or(indexOrPrimayKey: string): WhereClause;
  37. orderBy(index: string): Collection;
  38. primaryKeys(): Promise;
  39. put(item: T, key?: Key): Promise;
  40. reverse(): Collection;
  41. sortBy(keyPath: string): Promise;
  42. startsWith(key: string): Collection;
  43. startsWithAnyOf(prefixes: string[]): Collection;
  44. startsWithAnyOfIgnoreCase(prefixes: string[]): Collection;
  45. startsWithIgnoreCase(key: string): Collection;
  46. toArray(): Promise;
  47. toCollection(): Collection;
  48. uniqueKeys(): Promise;
  49. until(filter: (value) => boolean, includeStopEntry?: boolean): Collection;
  50. update(key: Key, changes: { [keyPath: string]: any }): Promise;
  51. ```
This is a mix of methods from WhereClause, Table and Collection. Dive into the API reference to see the details.

Hello World (Typescript)


  1. ``` js
  2. import Dexie, { Table } from 'dexie';

  4. interface Friend {
  5.     id?: number;
  6.     name?: string;
  7.     age?: number;
  8. }

  10. //
  11. // Declare Database
  12. //
  13. class FriendDatabase extends Dexie {
  14.     public friends!: Table<Friend, number>; // id is number in this case

  16.     public constructor() {
  17.         super("FriendDatabase");
  18.         this.version(1).stores({
  19.             friends: "++id,name,age"
  20.         });
  21.     }
  22. }

  24. const db = new FriendDatabase();

  26. db.transaction('rw', db.friends, async() => {

  28.     // Make sure we have something in DB:
  29.     if ((await db.friends.where({name: 'Josephine'}).count()) === 0) {
  30.         const id = await db.friends.add({name: "Josephine", age: 21});
  31.         alert (`Addded friend with id ${id}`);
  32.     }

  34.     // Query:
  35.     const youngFriends = await db.friends.where("age").below(25).toArray();

  37.     // Show result:
  38.     alert ("My young friends: " + JSON.stringify(youngFriends));

  40. }).catch(e => {
  41.     alert(e.stack || e);
  42. });
  43. ```

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 over npm
  1. ```
  2. npm install dexie
  3. ```


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

Legacy:

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

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

Modern:

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
  1. ```
  2. pnpm install
  3. pnpm run build
  4. ```

Test
  1. ```
  2. pnpm test
  3. ```

Watch
  1. ```
  2. pnpm run watch
  3. ```


[npm-image]: https://img.shields.io/npm/v/dexie.svg?style=flat
[npm-url]: https://npmjs.org/package/dexie