Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML IndexedDB Delete

Posted in HTML Tutorial
Updated on Sep 29, 2024
By Mari Selvan
πŸ‘οΈ 17 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
HTML IndexedDB Delete

Photo Credit to CodeToFun

πŸ™‹ Introduction

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files and blobs. It allows you to store, search, and retrieve data efficiently in web applications.

Deleting data from IndexedDB is a critical operation that ensures your application can manage storage effectively.

❓ What is IndexedDB?

IndexedDB is a powerful storage solution in web browsers that lets developers manage large volumes of structured data. Unlike localStorage, IndexedDB allows for more complex queries and storing complex data types.

🧠 Understanding Deletion in IndexedDB

Deletion in IndexedDB can refer to removing individual records, clearing all records in an object store, or even deleting entire object stores. Understanding the appropriate deletion operation for your needs is crucial for maintaining the integrity of your data.

πŸ—‘οΈ Deleting Data from IndexedDB

To delete specific data from an IndexedDB object store, you can use the delete method provided by the transaction. Below is a basic example:

javascript
Copied
Copy To Clipboard
// Open the database
const request = indexedDB.open('MyDatabase', 1);

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['MyObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('MyObjectStore');

  // Delete a record by key
  const deleteRequest = objectStore.delete('someKey');

  deleteRequest.onsuccess = function() {
    console.log('Record deleted successfully');
  };

  deleteRequest.onerror = function() {
    console.error('Failed to delete record');
  };
};

πŸ—‘οΈ Deleting All Records

If you need to delete all records from an object store, the clear method is the most efficient way to do so:

javascript
Copied
Copy To Clipboard
const transaction = db.transaction(['MyObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('MyObjectStore');

// Clear all records
const clearRequest = objectStore.clear();

clearRequest.onsuccess = function() {
  console.log('All records deleted successfully');
};

clearRequest.onerror = function() {
  console.error('Failed to delete all records');
};

πŸ—‘οΈ Deleting Object Stores

To delete an entire object store, you need to perform this operation during a version upgrade of the database:

javascript
Copied
Copy To Clipboard
const request = indexedDB.open('MyDatabase', 2); // Increment the version number

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

  // Delete the object store
  if (db.objectStoreNames.contains('MyObjectStore')) {
    db.deleteObjectStore('MyObjectStore');
    console.log('Object store deleted successfully');
  }
};

⚠️ Common Pitfalls

  1. Transaction Mode: Ensure that you use the correct transaction mode (readwrite) when attempting to delete records. A read-only transaction will not allow deletion.
  2. Version Upgrades: Deleting object stores requires a version upgrade. Be cautious when handling version upgrades, as they can impact all users accessing the database.
  3. Error Handling: Always implement error handling when deleting records or object stores to gracefully manage any issues that may arise.

πŸ“ Example Usage

Here’s a complete example that demonstrates how to delete a specific record from an IndexedDB object store:

javascript
Copied
Copy To Clipboard
// Open the database
const request = indexedDB.open('MyDatabase', 1);

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['MyObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('MyObjectStore');

  // Delete a record with a specific key
  const deleteRequest = objectStore.delete('uniqueKey');

  deleteRequest.onsuccess = function() {
    console.log('Record with key "uniqueKey" deleted successfully');
  };

  deleteRequest.onerror = function() {
    console.error('Failed to delete the record');
  };
};

πŸŽ‰ Conclusion

Deleting data in IndexedDB is an essential operation for managing and maintaining your database. Whether you are deleting individual records, clearing entire object stores, or upgrading your database version, understanding how to handle these operations correctly is key to ensuring your application runs smoothly.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy