Mastering IndexedDB with Dexie.js: Efficient Data Management
Written on
Chapter 1: Introduction to IndexedDB and Dexie
IndexedDB serves as a powerful method for storing data directly within the browser, allowing for a more extensive and asynchronous data storage solution compared to local storage. Dexie.js simplifies interactions with IndexedDB, making it easier for developers to manage data.
In this article, we will explore the fundamental processes of managing IndexedDB with Dexie, focusing on deleting items and querying data.
Section 1.1: Deleting Items from IndexedDB
To remove an item from the database, you can utilize the delete method, which operates on the primary key. Here’s a practical example:
(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);}
})()
In this snippet, we create an object with the primary key 'mary', which corresponds to the name field. The delete method is then called to remove this item based on its primary key.
For bulk deletions, you can use the bulkDelete method to remove multiple items at once. Here's how it can be done:
(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
});
await db.friends.bulkDelete(['mary', 'jane']);
} catch (error) {
console.log(error);}
})()
In this example, we add entries for both 'mary' and 'jane', and subsequently use the bulkDelete method to eliminate them simultaneously.
Section 1.2: Querying Items in IndexedDB
Querying data can be accomplished using various methods. Below is an illustration of how to retrieve items based on specific criteria:
(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);}
})()
In this example, the where method specifies the field to search in, while the between method allows you to define the range of values. The offset method skips a specified number of results, and limit restricts the total number of results returned.
You can also iterate through results using the each method:
(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
});
await db.friends
.where("name")
.equalsIgnoreCase("mary")
.each(friend => {
console.log(friend);});
} catch (error) {
console.log(error);}
})()
Here, equalsIgnoreCase is used to perform a case-insensitive search for the name 'mary', and each iterates over the results.
To search for names that start with specific substrings in a case-insensitive manner, you can use the startsWithAnyOfIgnoreCase method:
(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);}
})()
This query retrieves names starting with 'm' or 'j'.
Chapter 2: Conclusion
In summary, Dexie.js provides a robust way to manage data in IndexedDB, enabling you to efficiently delete items and perform complex queries.
This video guides you through the basics of using IndexedDB and Dexie.js, perfect for beginners wanting to learn data storage in web applications.
Learn how to insert, update, and delete data using IndexedDB in this informative video, enhancing your skills in database management.