Mastering IndexedDB with Dexie: A Comprehensive Guide
Written on
Chapter 1: Introduction to IndexedDB and Dexie
IndexedDB offers a method for storing data directly within the browser, enabling the retention of significantly more information than local storage through asynchronous operations. Dexie simplifies the interactions with IndexedDB, making it a more user-friendly experience.
To kick off our journey with IndexedDB using Dexie, we first need to include Dexie in our project. This can be done by adding a script tag to your HTML file:
Once included, you can begin creating your database and managing data.
Section 1.1: Creating a Database
To create a database, you can use the following code snippet:
const db = new Dexie("friend_database");
(async () => {
try {
await db.version(1).stores({
friends: 'name,age'});
await db.friends.put({
name: "mary",
age: 28
});
const friend = await db.friends.get('mary');
console.log(friend.age);
} catch (error) {
console.error(error);}
})();
In this example, we utilize the Dexie constructor to initialize our database. We define a store with fields for name and age, which allows for indexed searching. Data can be added with the put method, and we retrieve a specific entry using the indexed column.
Subsection 1.1.1: Visual Overview
Section 1.2: Utilizing Dexie as a Module
For those who prefer using Dexie as a module, you can easily install it using npm:
npm i dexie
After installation, you can write similar code with module imports:
import Dexie from "dexie";
const db = new Dexie("friend_database");
(async () => {
try {
await db.version(1).stores({
friends: "name,age"});
await db.friends.put({
name: "mary",
age: 28
});
const friend = await db.friends.get("mary");
console.log(friend.age);
} catch (error) {
console.error(error);}
})();
Chapter 2: Understanding the Dexie Class
The Dexie class serves dual purposes: it acts as both a class and a namespace. When utilized, it represents a database connection and can also export various functions and utilities. In browser environments, the Dexie property is added to the window object, while in modules, it is available as a default export.
Section 2.1: Exploring the Table Class
The Table class provides direct access to object stores defined in your schema. Consider the following example:
(async () => {
const db = new Dexie("FriendsAndPetsDB");
await db.version(1).stores({
friends: "++id,name,isCloseFriend",
pets: "++id,name,kind"
});
await db.open();
await db.friends.add({
name: "james",
isCloseFriend: true
});
await db.pets.add({
name: "mary",
kind: "dog",
fur: "long"
});
})();
In this instance, we create two stores: friends and pets. The db.friends and db.pets variables serve as table instances for data manipulation, including adding new entries.
Chapter 3: Video Resources for Learning
To further enhance your understanding, here are some helpful YouTube resources:
This video, titled "Get Started with Indexed DB & Dexie.js Using JavaScript: A Beginner's Guide," walks you through the basics of using IndexedDB and Dexie.js.
Another helpful video is "IndexedDB - FINALLY an EASY Way! (with Localbase)," which simplifies the IndexedDB process.
Conclusion
With the Dexie library, manipulating IndexedDB data becomes straightforward and efficient. For more informative articles like this, check out plainenglish.io.