Export and Import IndexedDB Database

Export / Import IndexedDB <---> Blob

This module extends 'dexie' module with new methods for importing / exporting databases to / from blobs.

Install

npm install dexie
npm install dexie-export-import

Usage

Here's the basic usage. There's a lot you can do by supplying optional [options] arguments. The available options are described later on in this README (See Typescript interfaces below).

NOTE: Typescript users using dexie@2.x will get compilation errors if using the static import method Dexie.import().

1import Dexie from "dexie";
2import "dexie-export-import";
3
4//
5// Import from Blob or File to Dexie instance:
6//
7const db = await Dexie.import(blob, [options]);
8
9//
10// Export to Blob
11//
12const blob = await db.export([options]);
13
14//
15// Import from Blob or File to existing Dexie instance
16//
17await db.import(blob, [options]);
18

Sample

Here's a working sample on CodePen. It uses downloadjs to deliver the blob as a "file download" to the user. For receiving an import file, it uses a drop area where you can drop your JSON file. Click the Console tab in the bottom to see what progressCallbacks receive.

Even though this sample doesn't show it, blobs can also be sent or retrieved to/from a server, using the fetch API.

Features

• Export of IndexedDB Database to JSON Blob.
• Import from Blob back to IndexedDB Database.
• An import Blob can be retrieved from an URL (using fetch()) or from a user-input file (dropped or browsed to).
• An export Blob can be either given end-user to be stored in Downloaded Files, or be send to a server over HTTP(S) using fetch().
• Chunk-wise / Streaming - does not read the entire DB into RAM
• Progress callback (typically for showing progress bar)
• Optional filter allows to import/export subset of data
• Support for all structured clonable exotic types (Date, ArrayBuffer, Blob, etc) except CryptoKeys (which by design cannot be exported)
• Atomic - import / export within one database transaction (optional)
• Export speed: Using getAll() in chunks rather than openCursor().
• Import speed: Using bulkPut() in chunks rather than put().
• Can well be run from a Web Worker (better speed + doesn't lock GUI).
• Can also export IndexedDB databases that was not created with Dexie.

Compatibility

Product	Supported versions
dexie	^2.0.4 or ^3.0.0-alpha.5
Safari	^10.1
IE	11
Edge	any version
Chrome	any version
FF	any version

Similar Libraries

indexeddb-export-import

Much smaller in size, but also much lighter than dexie-export-import.

Indexeddb-export-import can be better choice if:

• your data contains no Dates, ArrayBuffers, TypedArrays or Blobs (only objects, strings, numbers, booleans and arrays).
• your database is small enough to fit in RAM on your target devices.

Dexie-export-import was build to scale when exporting large databases without consuming much RAM. It does also support importing/exporting exotic types.

Interface

Importing this module will extend Dexie and Dexie.prototype as follows. Even though this is conceptually a Dexie.js addon, there is no addon instance. Extended interface is done into Dexie and Dexie.prototype as a side effect when importing the module.

1//
2// Extend Dexie interface (typescript-wise)
3//
4declare module 'dexie' {
5  // Extend methods on db
6  interface Dexie {
7    export(options?: ExportOptions): Promise<Blob>;
8    import(blob: Blob, options?: ImportOptions): Promise<void>;
9  }
10  interface DexieConstructor {
11    import(blob: Blob, options?: StaticImportOptions): Promise<Dexie>;
12  }
13}

StaticImportOptions and ImportOptions

These are the interfaces of the options optional arguments to Dexie.import() and Dexie.prototype.import(). All options are optional and defaults to undefined (falsy).

1export interface StaticImportOptions {
2  noTransaction?: boolean;
3  chunkSizeBytes?: number; // Default: DEFAULT_KILOBYTES_PER_CHUNK ( 1MB )
4  filter?: (table: string, value: any, key?: any) => boolean;
5  progressCallback?: (progress: ImportProgress) => boolean;
6  name?: string;
7}
8
9export interface ImportOptions extends StaticImportOptions {
10  acceptMissingTables?: boolean;
11  acceptVersionDiff?: boolean;
12  acceptNameDiff?: boolean;
13  acceptChangedPrimaryKey?: boolean;
14  overwriteValues?: boolean;
15  clearTablesBeforeImport?: boolean;
16  noTransaction?: boolean;
17  chunkSizeBytes?: number; // Default: DEFAULT_KILOBYTES_PER_CHUNK ( 1MB )
18  filter?: (table: string, value: any, key?: any) => boolean;
19  progressCallback?: (progress: ImportProgress) => boolean;
20}
21

ImportProgress

This is the interface sent to the progressCallback.

1export interface ImportProgress {
2  totalTables: number;
3  completedTables: number;
4  totalRows: number;
5  completedRows: number;
6  done: boolean;
7}

ExportOptions

This is the interface of the options optional arguments to Dexie.prototype.export(). All options are optional and defaults to undefined (falsy).

1export interface ExportOptions {
2  noTransaction?: boolean;
3  numRowsPerChunk?: number;
4  prettyJson?: boolean;
5  filter?: (table: string, value: any, key?: any) => boolean;
6  progressCallback?: (progress: ExportProgress) => boolean;
7}

ExportProgress

This is the interface sent to the ExportOptions.progressCallback.

1export interface ExportProgress {
2  totalTables: number;
3  completedTables: number;
4  totalRows: number;
5  completedRows: number;
6  done: boolean;
7}

Defaults

These are the default chunk sizes used when not specified in the options object. We allow quite large chunks, but still not that large (1MB RAM is not much even for a small device).

1const DEFAULT_KILOBYTES_PER_CHUNK = 1024; // When importing blob
2const DEFAULT_ROWS_PER_CHUNK = 2000; // When exporting db

JSON Format

The JSON format is described in the Typescript interface below. This JSON format is streamable as it is generated in a streaming fashion, and imported also using a streaming fashion. Therefore, it is important that the data come last in the file.

1export interface DexieExportJsonStructure {
2  formatName: 'dexie';
3  formatVersion: 1;
4  data: {
5    databaseName: string;
6    databaseVersion: number;
7    tables: Array<{
8      name: string;
9      schema: string; // '++id,name,age'
10      rowCount: number;
11    }>;
12    data: Array<{ // This property must be last (for streaming purpose)
13      tableName: string;
14      inbound: boolean;
15      rows: any[]; // This property must be last (for streaming purpose)
16    }>;
17  }
18}

Example JSON File

1{
2  "formatName": "dexie",
3  "formatVersion": 1,
4  "data": {
5    "databaseName": "dexie-export-import-basic-tests",
6    "databaseVersion": 1,
7    "tables": [
8      {
9        "name": "outbound",
10        "schema": "",
11        "rowCount": 2
12      },
13      {
14        "name": "inbound",
15        "schema": "++id",
16        "rowCount": 3
17      }
18    ],
19    "data": [{
20      "tableName": "outbound",
21      "inbound": false,
22      "rows": [
23        [
24          1,
25          {
26            "foo": "bar"
27          }
28        ],
29        [
30          2,
31          {
32            "bar": "foo"
33          }
34        ]
35      ]
36    },{
37      "tableName": "inbound",
38      "inbound": true,
39      "rows": [
40        {
41          "id": 1,
42          "date": 1,
43          "fullBlob": {
44            "type": "",
45            "data": "AAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV5fYGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+/w=="
46          },
47          "binary": {
48            "buffer": "AQID",
49            "byteOffset": 0,
50            "length": 3
51          },
52          "text": "foo",
53          "bool": false,
54          "$types": {
55            "date": "date",
56            "fullBlob": "blob2",
57            "binary": "uint8array2",
58            "binary.buffer": "arraybuffer"
59          }
60        },
61        {
62          "id": 2,
63          "foo": "bar"
64        },
65        {
66          "id": 3,
67          "bar": "foo"
68        }
69      ]
70    }]
71  }
72

Exporting IndexedDB Databases that wasn't generated with Dexie

As Dexie can dynamically open non-Dexie IndexedDB databases, this is not an issue. Sample provided here:

1import Dexie from 'dexie';
2import 'dexie-export-import';
3
4async function exportDatabase(databaseName) {
5  const db = await new Dexie(databaseName).open();
6  const blob = await db.export();
7  return blob;
8}
9
10async function importDatabase(file) {
11  const db = await Dexie.import(file);
12  return db.backendDB();
13}

Background / Why

This feature has been asked for a lot:

• https://github.com/dexie/Dexie.js/issues/391
• https://github.com/dexie/Dexie.js/issues/99
• https://stackoverflow.com/questions/46025699/dumping-indexeddb-data

My simple answer initially was this:

1function export(db) {
2    return db.transaction('r', db.tables, ()=>{
3        return Promise.all(
4            db.tables.map(table => table.toArray()
5                .then(rows => ({table: table.name, rows: rows})));
6    });
7}
8
9function import(data, db) {
10    return db.transaction('rw', db.tables, () => {
11        return Promise.all(data.map (t =>
12            db.table(t.table).clear()
13              .then(()=>db.table(t.table).bulkAdd(t.rows)));
14    });
15}

Looks simple!

But:

1. The whole database has to fit in RAM. Can be issue on small devices.
2. If using JSON.stringify() / JSON.parse() on the data, we won't support exotic types (Dates, Blobs, ArrayBuffers, etc)
3. Not possible to show a progress while importing.

This addon solves these issues, and some more, with the help of some libraries.

Libraries Used

To accomplish a streamable export/import, and allow exotic types, I use the libraries listed below. Note that these libraries are listed as devDependencies because they are bundles using rollupjs - so there's no real dependency from the library user persective.

typeson and typeson-registry

These modules enables something similar as JSON.stringify() / JSON.parse() for exotic or custom types.

clarinet

This module allow to read JSON in a streaming fashion

Streaming JSON

I must admit that I had to do some research before I understood how to accomplish streaming JSON from client-side Javascript (both reading / writing). It is really not obvious that this would even be possible. Looking at the Blob interface, it does not provide any way of either reading or writing in a streamable fashion.

What I found though (after some googling) was that it is indeed possible to do that based on the current DOM platform (including IE11 !).

Reading JSON in Chunks

A File or Blob represents something that can lie on a disk file and not yet be in RAM. So how do we read the first 100 bytes from a Blob without reading it all?

1const firstPart = blob.slice(0,100);

Ok, and in the next step we use a FileReader to really read this sliced Blob into memory.

1
2const first100Chars = await readBlob(firstPart);
3
4function readBlob(blob: Blob): Promise<string> {
5  return new Promise((resolve, reject) => {
6    const reader = new FileReader();
7    reader.onabort = ev => reject(new Error("file read aborted"));
8    reader.onerror = ev => reject((ev.target as any).error);
9    reader.onload = ev => resolve((ev.target as any).result);
10    reader.readAsText(blob);
11  });
12}

Voila!

But! How can we keep transactions alive when calling this non-indexedDB async call?

I use two different solutions for this:

1. If we are in a Worker, I use new FileReaderSync() instead of new FileReader().
2. If in the main thread, I use Dexie.waitFor() to while reading this short elapsed chunk, keeping the transaction alive still.

Ok, fine, but how do we parse the chunk then? Cannot use JSON.parse(firstPart) because it will most defenitely be incomplete.

Clarinet to the rescue. This library can read JSON and callback whenever JSON tokens come in.

Writing JSON in Chunks

Writing JSON is solved more easily. As the BlobBuilder interface was deprecated from the DOM, I firstly found this task impossible. But after digging around, I found that also this SHOULD be possible if browers implement the Blob interface correctly.

Blobs can be constructeed from an array of other Blobs. This is the key.

1. Let's say we generate 1000 Blobs of 1MB each on a device with 512 MB RAM. If the browser does its job well, it will allow the first 200 blobs or so to reside in RAM. But then, it should start putting the remanding blobs onto temporary files.
2. We put all these 1000 blobs into an array and generate a final Blob from that array.

And that's pretty much it.