%2F%2Funsplash.com%3Futm_source%3Dmedium%26utm_medium%3Dreferral)
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.
Declare Database
We declare our IndexedDB database with the Dexie class.
For example, we write:
(async () => {
var db = new Dexie("MyDatabase");
db.version(1).stores({
friends: "++id, name, age, *tags",
records: "id, score"
});
})()
friends and records are the tables.
The property strings are the columns that we want to index.
We shouldn’t declare all columns like in SQL.
The string has some special syntax. They include:
+— Auto-incremented primary key&— Unique*— Multi-entry index[A+B]— Compound index
Class Binding
We can map our entries to an instance of a class by writing:
class Friend {
save() {
return db.friends.put(this);
}
get age() {
return moment(Date.now()).diff(this.birthDate, 'years');
}
}
(async () => {
const db = new Dexie("MyDatabase");
await db.version(1).stores({
friends: "++id, name, age, *tags",
});
db.friends.mapToClass(Friend);
})()
We call mapToClass to map our friends entries to Friend class instances.
Add Items
To add items into our database, we call the add method.
For example, we can write:
(async () => {
const db = new Dexie("MyDatabase");
await db.version(1).stores({
friends: "++id, name, age, *tags",
});
await db.friends.add({
name: "joe",
age: 21
});
})()
to add an entry to the friends table.
We can add multiple entries at once with the bulkAdd method:
(async () => {
const db = new Dexie("MyDatabase");
await db.version(1).stores({
friends: "++id, name, age, *tags",
});
await db.friends.bulkAdd([{
name: "alex",
age: 31
},
{
name: "mary",
age: 32
}
]);
})()
Update Items
We update items in our database with the put method.
If it doesn’t exist, put will also add new objects to the store.
For example, we can write:
(async () => {
const db = new Dexie("MyDatabase");
await db.version(1).stores({
friends: "++id, name, age, *tags",
});
await db.friends.put({
id: 4,
name: "jane",
age: 33
});
})()
We can use bulkPut to call put with multiple objects.
For example, we can write:
(async () => {
const db = new Dexie("MyDatabase");
await db.version(1).stores({
friends: "++id, name, age, *tags",
});
await db.friends.bulkPut([{
id: 4,
name: "bob",
age: 34
},
{
id: 5,
name: "may",
age: 44
}
]);
})()
to add or update both entries.
If we just want to update an entry, we can use the update method.
For example, we can write:
(async () => {
const db = new Dexie("MyDatabase");
await db.version(1).stores({
friends: "++id, name, age, *tags",
});
await db.friends.update(4, {
name: "peter"
});
})()
to update entries with id 4 to with the new field values.
We can also call modify to modify any entry that is returned from queries:
(async () => {
const db = new Dexie("MyDatabase");
await db.version(1).stores({
friends: "++id, name, age, discount",
});
await db.friends.bulkAdd([{
name: "alex",
age: 17
},
{
name: "mary",
age: 32
},
{
name: "don",
age: 70
}
]);
const results = await db.friends
.where("age")
.inAnyRange([
[0, 18],
[65, Infinity]
])
await results.modify(friend => {
friend.discount = 0.3;
});
})()
We get the results from the query. where takes a field name.
inAnyRange lets us search for values in the given ranges for the given field name.
The modify modifies the returned results.