What is IndexedDB
IndexedDB was developed as part of the HTML5 specification and is designed to be a more powerful alternative to traditional web storage mechanisms like cookies and local storage. It provides a way to store large amounts of structured data in a more efficient and flexible way.
How does IndexedDB work?
IndexedDB uses a key-value store to store data, which means that each piece of data is associated with a unique key that can be used to retrieve it later. Data is stored in objects called object stores, which can be thought of as tables in a traditional database.
To store data in IndexedDB, you first need to create a database and object store. Here’s an example of how to create a simple IndexedDB database in JavaScript:
const dbName = 'myDatabase';
const dbVersion = 1;
const openRequest = indexedDB.open(dbName, dbVersion);
openRequest.onupgradeneeded = function() {
const db = openRequest.result;
const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};
openRequest.onsuccess = function() {
const db = openRequest.result;
const transaction = db.transaction('myObjectStore', 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const data = { id: 1, name: 'abhi ' };
const addRequest = objectStore.add(data);
addRequest.onsuccess = function() {
console.log('Data added to IndexedDB!');
};
};
In this example, we create a new IndexedDB database with the name ‘myDatabase’ and version number 1. We then create an object store called ‘myObjectStore’ with a key path of ‘id’, which means that each object in the store will have a unique ‘id’ property that can be used to retrieve it later.
We then open the database and create a new transaction that allows us to read and write data to the ‘myObjectStore’ object store. We add a new object to the store using the add() method and log a message to the console when the operation is successful.
IndexedDB also provides powerful querying capabilities that allow you to retrieve data based on specific criteria. For example, you can use the get() method to retrieve a single object based on its key, or the getAll() method to retrieve all objects in an object store. You can also use indexes to retrieve objects based on specific properties or values.
Why use IndexedDB?
IndexedDB provides several benefits over traditional web storage mechanisms like cookies and local storage. Here are a few reasons why you might choose to use IndexedDB:
Scalability: IndexedDB is designed to handle large amounts of structured data, making it a good choice for applications that need to store and retrieve large amounts of data.
Flexibility: IndexedDB provides a flexible way to store and query structured data, allowing you to retrieve data based on specific criteria.
Performance: IndexedDB is typically faster than traditional web storage mechanisms, especially when dealing with large amounts of data.
Offline support: IndexedDB allows web applications to store data locally, which means that they can continue to function even when the user is offline.
Conclusion
, IndexedDB is a powerful JavaScript-based object-oriented database that provides a flexible and scalable way to store structured data in web applications. By using key-value stores, object stores, and indexes, Indexed
