myHotTake

Tag: JavaScript database tutorial

  • How Do Object Stores in IndexedDB Work? An Auto Garage Analogy

    Hey, if you find this story helpful, feel free to like or share it!


    I’m a mechanic who runs a large auto garage. Each part I have is stored meticulously in different sections based on type. I treat each section as a specialized object store in my IndexedDB, which is like the digital version of my garage.

    In my garage, I have sections for tires, engines, brake pads, and so on. Each section is dedicated to a specific type of part, just like an object store is dedicated to a particular category of data. If I need to find a specific tire, I go to the tire section—my object store for tires—and search through it by the part number or brand. This is how object stores allow me to organize and access data efficiently.

    Every time a car comes in for repair, I know exactly which section to visit. If a customer needs new brake pads, I don’t waste time looking through the engine section. This is akin to how object stores ensure quick and precise data retrieval in IndexedDB. The organization saves me a lot of hassle and time, just as well-designed object stores speed up data queries in an application.

    When I get a new shipment of parts, I update my inventory by adding new items to the respective sections. Similarly, with IndexedDB, I can add, update, or delete entries within an object store, keeping my data current and organized.

    So, think of object stores as the well-organized sections of my auto garage, making everything easy to find and manage. If you liked this analogy, feel free to give it a thumbs up or share it!


    First, I need to open the IndexedDB database, which is like unlocking the garage doors. I do this using the indexedDB.open method:

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

    Here, “AutoGarageDB” is my database name, and 1 is the version number. If the database doesn’t exist, it’s created.

    When I get a new shipment of parts, I need to set up new sections if they’re not already there. In IndexedDB terms, I need to create object stores:

    request.onupgradeneeded = function(event) {
      let db = event.target.result;
      if (!db.objectStoreNames.contains("Tires")) {
        db.createObjectStore("Tires", { keyPath: "id" });
      }
      if (!db.objectStoreNames.contains("BrakePads")) {
        db.createObjectStore("BrakePads", { keyPath: "id" });
      }
    };

    Here, I’m creating object stores for “Tires” and “BrakePads,” specifying id as the unique key for each item, much like how part numbers uniquely identify parts in the garage.

    Once the sections are set up, I can add new parts to the sections:

    request.onsuccess = function(event) {
      let db = event.target.result;
      let transaction = db.transaction(["Tires"], "readwrite");
      let tireStore = transaction.objectStore("Tires");
    
      let newTire = { id: "T123", brand: "GoodYear", size: 17 };
      tireStore.add(newTire);
    };

    This code adds a new tire to the “Tires” section. The transaction ensures that the operation is atomic, meaning it either fully succeeds or fails without partial completion, similar to how I would handle the inventory update in my garage.

    If I need to find a specific tire, I can retrieve it just like locating a part in the garage:

    let getRequest = tireStore.get("T123");
    getRequest.onsuccess = function(event) {
      let tire = event.target.result;
      console.log("Tire found:", tire);
    };

    Key Takeaways

    • Object Stores as Sections: Just as I organize parts in specific sections in my garage, object stores categorize data, making retrieval efficient.
    • Transactions for Operations: Transactions in IndexedDB ensure operations are completed fully, safeguarding against partial updates.
    • Unique Identification: Using key paths such as id in object stores helps uniquely identify and manage data entries, much like part numbers in my inventory.