Mastering IndexedDB with Dexie: Queries and Indexing Techniques
Written on
Chapter 1: Introduction to IndexedDB and Dexie
IndexedDB serves as a powerful mechanism for storing data within web browsers, allowing for the handling of larger datasets compared to local storage, and it operates asynchronously. Dexie simplifies interactions with IndexedDB, making it more accessible for developers. This article explores how to effectively use IndexedDB through Dexie.
Section 1.1: Basic Queries with Dexie
To retrieve objects from a database table, we can employ the get and where methods. The get method is utilized for fetching an object based on its primary key, while the where method enables more complex queries.
For instance, here's how we can implement the get method:
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);}
})()
In this example, we invoke get with the ID of the entry we want to retrieve, which returns a promise containing our desired result.
Section 1.2: Advanced Queries Using the where Method
To perform more sophisticated queries, the where method comes into play. Here’s a sample implementation:
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);}
})()
In this snippet, we first insert two entries into the friends table and then query the count of friends older than 25. The where method allows us to filter based on specific criteria, while count provides the total number of matches.
Chapter 2: Enhanced Querying Techniques
For even more detailed queries, we can chain multiple conditions together:
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);}
})()
Here, we utilize or to combine conditions, anyOf to match any values in an array, and and to enforce multiple conditions. The limit method restricts the number of results returned, while each allows for iteration through the outcomes.
In this video, "Get Started with Indexed DB & Dexie.js Using JavaScript: A Beginner's Guide," viewers will learn the fundamentals of utilizing IndexedDB and Dexie for effective data management.
The video titled "Dexie.js for Offline Storage in React Apps" delves into how Dexie can be integrated into React applications for offline data storage solutions.
Section 2.1: Defining a Schema with Dexie
Dexie allows for the creation of a schema using its specific syntax, which includes various components for defining keys and indexes. Examples of this syntax encompass:
- ++keyPath — Autoincrementing primary key.
- ++ — A hidden autoincrement primary key.
- keyPath — Non-autoincrement primary key.
- *keyPath — An array where each item is treated as a key.
To define indexes, you can write:
(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
With Dexie, creating queries and defining indexes within an IndexedDB database becomes a straightforward task, empowering developers to efficiently manage data storage.