IndexedDB Manipulation with Dexie — Indexes, Seed Data, and Promises

Photo by Francesco Gallarotti on Unsplash

IndexedDB is a way to store data in the browser.

It lets us store larger amounts of data than local storage in an asynchronous way.

Dexie makes working with IndexedDB easier.

In this article, we’ll take a look at how to start working with IndexedDB with Dexie.

Indexes

We can add and drop indexes as we wish.

For example, we write:

const db = new Dexie("dbs");
db.version(1).stores({
  foo1: 'id,x,y,z',
  foo2: 'id,x,y,z',
  foo3: 'id,x,y,z'
});
db.version(2).stores({
  foo1: 'id,x,z'
});
db.version(3).stores({
  foo2: 'id, x, x2, y, z'
});
db.version(4).stores({
  foo3: null
});

We created the foo1 , foo2 , and foo3 stores with indexes x , y and z .

Then to delete index y from foo1 , we write:

db.version(2).stores({
  foo1: 'id,x,z'
});

To add index x2 to foo2 , we write:

db.version(3).stores({
  foo2: 'id, x, x2, y, z'
});

And to drop table foo3 , we write:

db.version(4).stores({
  foo3: null
});

The populate Event