How Do I Create a Database in IndexedDB with JavaScript?

If you find this story helpful, feel free to like or share it.

---

I’m a mechanic, and my garage is my workspace. This garage isn’t just any garage; it’s a high-tech workshop where I organize all my tools, spare parts, and blueprints. Creating a database in IndexedDB is like setting up this garage for efficient work.

First, I need to build the garage itself. In the world of IndexedDB, this is akin to opening a connection to the database. I start by drafting a blueprint and laying the foundation. In coding terms, I use indexedDB.open() to set the wheels in motion, specifying the name and version of my database, much like naming my garage and deciding its capacity.

As the foundation is set, I think about the storage solutions for my tools and parts. This is where object stores come into play. They’re like the shelves and cabinets I install in my garage to keep everything organized. During the onupgradeneeded event, I set up these object stores using db.createObjectStore(), deciding how each shelf will be used — whether for wrenches, tires, or engine oils.

Next, I need a system to easily find my tools when I need them. This is where indexes come in. They’re like the labels I put on each shelf, allowing me to quickly locate a specific tool or part without rummaging through everything. In IndexedDB, I create indexes using objectStore.createIndex(), specifying attributes that help me retrieve data efficiently.

Finally, I ensure that my garage is a hub of activity, with tools and parts being added, removed, or updated as needed. This dynamic flow is mirrored in how I interact with the database using transactions. Each time I work on my projects, I use transactions to ensure that my operations are smooth and consistent. It’s like making sure that every tool I borrow or return is accounted for.

So, creating a database in IndexedDB is like setting up my ultimate garage workshop — I lay down a solid foundation, organize my tools with precision, label everything for quick access, and maintain a dynamic flow of operations, ensuring my workshop runs like a well-oiled machine.

---

Building the Garage: Opening the Database

First, I lay the groundwork by opening a connection to the database. This is like drafting the blueprint for my garage:

let request = indexedDB.open("MyGarage", 1);

request.onupgradeneeded = function(event) {
    let db = event.target.result;

    // Setting up shelves for tools and parts
    let toolStore = db.createObjectStore("tools", { keyPath: "id" });
    let partStore = db.createObjectStore("parts", { keyPath: "id" });

    // Adding labels for quick access
    toolStore.createIndex("by_name", "name", { unique: false });
    partStore.createIndex("by_type", "type", { unique: false });
};

request.onsuccess = function(event) {
    let db = event.target.result;
    console.log("Garage is set up and ready to go!");
};

request.onerror = function(event) {
    console.error("Error setting up the garage:", event.target.errorCode);
};

Organizing the Tools: Creating Object Stores and Indexes

In the onupgradeneeded event, I create object stores, which are like the shelves in my garage. I also add indexes for quick access:

let toolStore = db.createObjectStore("tools", { keyPath: "id" });
toolStore.createIndex("by_name", "name", { unique: false });

let partStore = db.createObjectStore("parts", { keyPath: "id" });
partStore.createIndex("by_type", "type", { unique: false });

Maintaining the Flow: Using Transactions

Whenever I need to add, update, or remove tools or parts, I use transactions to keep everything in order:

let transaction = db.transaction(["tools"], "readwrite");
let toolStore = transaction.objectStore("tools");

// Adding a new tool
let addToolRequest = toolStore.add({ id: 1, name: "Wrench", size: "M" });

addToolRequest.onsuccess = function() {
    console.log("Tool added successfully!");
};

addToolRequest.onerror = function() {
    console.error("Error adding tool:", addToolRequest.error);
};

Key Takeaways

• Database Connection: Just like setting the foundation of a garage, opening a connection with indexedDB.open() is the first step.
• Object Stores: These are like shelves, each designed to hold specific types of data, organized using createObjectStore().
• Indexes: These act like labels on the shelves, helping to retrieve items quickly and efficiently using createIndex().
• Transactions: They ensure smooth operation and consistency, handling read/write operations safely.