What is IndexedDB in JavaScript

If you are a JavaScript developer, you might have heard about IndexedDB. It is a powerful client-side storage mechanism that allows you to store and retrieve large amounts of structured data in your web applications. In this article, we will explore what IndexedDB is, how it works, and how you can use it in your JavaScript applications.

What is IndexedDB?

IndexedDB is a low-level API for client-side storage in web browsers. It provides a way to store and retrieve large amounts of structured data, including files and blobs. It is an alternative to other client-side storage mechanisms such as cookies, Web Storage, and Web SQL Database.

IndexedDB is based on the concept of object stores. An object store is a container for storing data. You can create multiple object stores within a database, and each object store can contain multiple objects. Each object has a key that uniquely identifies it within an object store.

How does IndexedDB work?

IndexedDB works by creating and manipulating databases. You can create a new database by calling the indexedDB.open() method. This method takes two parameters: the name of the database and its version.

const request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.log('Database error: ' + event.target.errorCode);
};

request.onsuccess = function(event) {
  const db = event.target.result;
  console.log('Database opened successfully');
};

In the code above, we create a new database called myDatabase with version 1. If the database already exists, the open() method will open it. If the database does not exist, it will create a new one.

Once the database is opened, you can create object stores within it. You can add data to an object store using the add() method, retrieve data using the get() method, and delete data using the delete() method.

const transaction = db.transaction(['customers'], 'readwrite');
const objectStore = transaction.objectStore('customers');

const customer = {
  name: 'John Smith',
  email: 'john@example.com',
  age: 30
};

const request = objectStore.add(customer);

request.onsuccess = function(event) {
  console.log('Customer added successfully');
};

In the code above, we create a new object store called customers. We then add a new customer to the object store using the add() method. The add() method returns a request object that you can use to handle success or error events.

IndexedDB provides several methods to manipulate databases and object stores. Here are some of the most commonly used methods:

indexedDB.open(): Opens a database or creates a new one.
IDBDatabase.createObjectStore(): Creates a new object store within a database.
IDBObjectStore.add(): Adds a new object to an object store.
IDBObjectStore.get(): Retrieves an object from an object store.
IDBObjectStore.delete(): Deletes an object from an object store.
IDBObjectStore.clear(): Deletes all objects from an object store.
IDBObjectStore.index(): Returns an index object that you can use to retrieve objects based on an index.

Conclusion

IndexedDB is a powerful client-side storage mechanism that allows you to store and retrieve large amounts of structured data in your web applications. It is based on the concept of object stores, which are containers for storing data. You can create multiple object stores within a database, and each object store can contain multiple objects. IndexedDB provides several methods to manipulate databases and object stores, making it a versatile and flexible tool for client-side storage in web applications.

What is IndexedDB in JavaScript