Deleting data from IndexedDB

01 Oct 2023

IndexedDB is a powerful browser-based database that allows web applications to store and retrieve data. In some cases, you may need to delete data from IndexedDB when it is no longer needed or to clean up the database. In this blog post, we will explore different methods to delete data from IndexedDB using JavaScript.

Deleting a single record

To delete a single record from IndexedDB, you first need to open a transaction and specify the object store from which the record needs to be deleted. Here’s an example using the JavaScript API:

const dbName = 'myDatabase';
const objectStoreName = 'myObjectStore';

// Open a connection to the database
const request = indexedDB.open(dbName);

// On success, delete the record
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(objectStoreName, 'readwrite');
  const objectStore = transaction.objectStore(objectStoreName);
  
  // Delete the record by its key
  const deleteRequest = objectStore.delete('recordKey');
  
  deleteRequest.onsuccess = function() {
    console.log("Record deleted successfully");
  };
  
  transaction.oncomplete = function() {
    console.log("Transaction complete");
  };
  
  transaction.onerror = function(event) {
    console.log("Transaction error:", event.target.error);
  };
};

In this example, we open a connection to the database using indexedDB.open. Once the connection is established, we open a transaction in read-write mode on the specified object store. Then, we use the delete() method of the object store to delete the record with the given key.

Deleting multiple records

To delete multiple records from IndexedDB, you can use a cursor to iterate over the records and delete them one by one. Here’s an example:

const dbName = 'myDatabase';
const objectStoreName = 'myObjectStore';

// Open a connection to the database
const request = indexedDB.open(dbName);

// On success, delete multiple records
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(objectStoreName, 'readwrite');
  const objectStore = transaction.objectStore(objectStoreName);

  // Open a cursor to iterate over records
  const cursorRequest = objectStore.openCursor();

  cursorRequest.onsuccess = function(event) {
    const cursor = event.target.result;

    if (cursor) {
      // Delete the record using the cursor's key
      objectStore.delete(cursor.key);
      cursor.continue();
    }
  };

  transaction.oncomplete = function() {
    console.log("Transaction complete");
  };

  transaction.onerror = function(event) {
    console.log("Transaction error:", event.target.error);
  };
};

In this example, we open a cursor on the object store using openCursor(). We then iterate over each record using the cursor and delete it using the delete() method.

Conclusion

Deleting data from IndexedDB is a straightforward process using the JavaScript API. By following the examples in this blog post, you can easily delete single or multiple records from an IndexedDB database. It’s important to handle errors and ensure transactions are properly completed to maintain data integrity.

#WebDevelopment #IndexedDB