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.
Delete Items
We can an item by its primary key with the delete method.
For example, we can write:
(async () => {
const db = new Dexie("friend_database");
try {
await db.version(1).stores({
friends: 'name,age'
});
await db.friends.put({
name: "mary",
age: 28
})
const friend = await db.friends.get('mary');
await db.friends.delete('mary');
} catch (error) {
console.log(error);
}
})()
We create an object with primary key 'mary' , which is the value of the name column.
Then we call delete to delete the item by its primary key.
We can call bulkDelete to delete multiple items with their primary keys.
For example, we can write:
(async () => {
const db = new Dexie("friend_database");
try {
await db.version(1).stores({
friends: 'name,age'
});
await db.friends.put({
name: "mary",
age: 28
})
await db.friends.put({
name: "jane",
age: 28
})
const friend = await db.friends.get('mary');
await db.friends.bulkDelete(['mary', 'jane']);
} catch (error) {
console.log(error);
}
})()
We create friends entries with primary key 'mary' and 'jane' .
Then we can delete them both with the bulkDelete method.
Query Items
We can query items with various methods.
For example, we can write:
(async () => {
const db = new Dexie("friend_database");
try {
await db.version(1).stores({
friends: 'name,age'
});
await db.friends.put({
name: "mary",
age: 28
})
await db.friends.put({
name: "jane",
age: 28
})
const someFriends = await db.friends
.where("age")
.between(20, 30)
.offset(0)
.limit(25)
.toArray();
console.log(someFriends)
} catch (error) {
console.log(error);
}
})()
The where method takes the field we’re searching in.
between takes the arguments we want to search between.
offset lets us skip the first number of items given the arguments.
limit limits the number of results returned.
toArray converts the results to an array.
We can also loop through the results with the each method.
For instance, we can write:
(async () => {
const db = new Dexie("friend_database");
try {
await db.version(1).stores({
friends: 'name,age'
});
await db.friends.put({
name: "mary",
age: 28
})
await db.friends.put({
name: "jane",
age: 28
})
const someFriends = await db.friends
.where("name")
.equalsIgnoreCase("mary")
.each(friend => {
console.log(friend);
});
} catch (error) {
console.log(error);
}
})()
We call equalsIgnoreCase to find the name with the given value ignoring the case.
Then we use each to loop through each result.
We can do a case-insensitive search for values of a field that starts with any one of the given substrings with the startsWithAnyOfIgnoreCase method.
For example, we can write:
(async () => {
const db = new Dexie("friend_database");
try {
await db.version(1).stores({
friends: 'name,age'
});
await db.friends.put({
name: "mary",
age: 28
})
await db.friends.put({
name: "jane",
age: 28
})
const someFriends = await db.friends
.where("name")
.startsWithAnyOfIgnoreCase(['m', 'j'])
.toArray();
console.log(someFriends)
} catch (error) {
console.log(error);
}
})()
to search for values of name that starts with 'm' or 'j' .
Conclusion
We can delete items from our tables and query for data in our IndexedDB database with Dexie.
