Master IndexedDB: Add, Update, Delete Records in JavaScript

If you find this explanation helpful, feel free to like or share it!

---

I’m the manager of a garage where I oversee a fleet of futuristic vehicles. Each vehicle represents a record in my IndexedDB database. Managing these vehicles involves three key tasks: adding new ones, updating existing ones, and sometimes even removing them from the fleet.

Adding a new vehicle to the garage is like introducing a brand-new sports car to the lineup. I start by opening the garage doors wide, much like opening a connection to the database. Then, I carefully drive the shiny new car into its designated spot, which is akin to using a transaction and calling add() to insert a new record. Once parked, the car is officially part of the fleet, just as a new entry is stored in the database.

Updating a vehicle is like giving one of the cars a high-performance upgrade. Maybe it’s a turbo boost or a sleek new paint job. I roll the car into a special service bay—similar to opening a transaction and finding the record using get(). I make the necessary modifications, then drive it back into its spot, effectively replacing the old version. This process mirrors using put() to update a record, ensuring the car is now better equipped for the road ahead.

Deleting a vehicle is a bit like deciding one of the cars is past its prime and needs to be retired. I carefully back it out of the garage, making sure there’s room for something new and improved in the future. This is similar to using the delete() method in a transaction to remove a record from the database.

And just like that, by managing my fleet of vehicles—adding, upgrading, and retiring them—I keep the garage running smoothly and efficiently, much like maintaining a dynamic and responsive IndexedDB database.

---

Adding a Record

When I add a new car to the fleet, it’s like adding a new record to the IndexedDB:

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

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

request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(['vehicles'], 'readwrite');
  let store = transaction.objectStore('vehicles');
  let newCar = { id: 1, make: 'Ferrari', model: 'F8' };
  store.add(newCar);
};

Updating a Record

Upgrading a car is like updating an existing record:

request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(['vehicles'], 'readwrite');
  let store = transaction.objectStore('vehicles');
  let request = store.get(1);

  request.onsuccess = function(event) {
    let car = event.target.result;
    car.model = 'F8 Tributo';
    store.put(car);
  };
};

Deleting a Record

Removing a car from the garage equates to deleting a record:

request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(['vehicles'], 'readwrite');
  let store = transaction.objectStore('vehicles');
  store.delete(1);
};

Key Takeaways

• Transactions: Much like opening the garage doors, transactions are crucial for performing any operation—be it adding, updating, or deleting.
• Object Stores: These are like my specialized service bays that handle specific types of vehicles, i.e., records.
• Methods (add, put, delete): These actions reflect the real-world tasks of adding a new car, upgrading an existing one, or removing it from the fleet.