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.
Queries
We can retrieve objects from our table with the get and where methods.
get retrieves an object by its primary key.
where does an advanced query.
For example, we can use get by writing:
const db = new Dexie("friend_database");
(async () => {
try {
await db.version(1).stores({
friends: '++id,name,age'
});
await db.friends.put({
name: "mary",
age: 28
})
await db.friends.put({
name: "james",
age: 22
})
const friend = await db.friends.get(1)
console.log(friend)
} catch (error) {
console.log(error);
}
})()
We call get with the id value of the entry to get.
Then that returns a promise with the result we want to get.
To make more complex queries, we can use the where query.
For instance, we can write:
const db = new Dexie("friend_database");
(async () => {
try {
await db.version(1).stores({
friends: '++id,name,age'
});
await db.friends.put({
name: "mary",
age: 28
})
await db.friends.put({
name: "james",
age: 22
})
const friendCount = await db.friends.where('age').above(25).count()
console.log(friendCount)
} catch (error) {
console.log(error);
}
})()
We add 2 entries to the friends table.
Then we call where with the column to search for.
above searches for anything with the value above a given value.
count returns the count of the results.
We can call more methods to make more advanced queries:
const db = new Dexie("friend_database");
(async () => {
try {
await db.version(1).stores({
friends: '++id,name,age'
});
await db.friends.put({
name: "mary",
age: 28,
isCloseFriend: true
})
await db.friends.put({
name: "james",
age: 22
})
const friendCount = await db.friends
.where('age')
.between(37, 40)
.or('name')
.anyOf(['mary', 'james'])
.and((friend) => {
return friend.isCloseFriend;
})
.limit(10)
.each((friend) => {
console.log(friend);
});
} catch (error) {
console.log(error);
}
})()
or lets us combine one or more conditions with an OR operator.
anyOf searches for any of the values in the array.
and combines one or more conditions with an AND operator.
limit limits the number of items returned.
each lets us iterate through each result.
Detailed Schema Syntax
We can define a schema with Dexie’s schema syntax.
Parts of the syntax include:
++keyPath— autoincrement primary key.++— hidden autoincrement primary key.keyPath— non-autoincrement primary key.(blank)— hidden primary key.keyPath— thekeyPathis indexed&keyPath—keyPathis indexed and the keys must be unique.*keyPath— the key is an array and eah array value is regarded as a key to the object[keyPath1+keyPath2]— compound index forkeyPath1andkeyPath2.
We can use them to add indexes by writing:
(async () => {
const db = new Dexie('MyDatabase');
db.version(1).stores({
friends: '++id,name,age',
pets: 'id, name, kind',
cars: '++, name',
enemies: ',name,*weaknesses',
users: 'meta.ssn, addr.city',
people: '[name+id], &id'
});
})()
Conclusion
We can make queries and create indexes easily in our IndexedDB database with Dexie.
