IndexedDB

IndexedDB is a browser-based database system that provides a way for web applications to store and retrieve large amounts of structured data, including files and complex objects. The purpose of IndexedDB is to allow web developers to create powerful applications that can work offline or with limited connectivity. IndexedDB is a part of the HTML5 specification and is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge.

Usage

IndexedDB is used primarily in web applications that require a large amount of data to be stored and accessed in the browser. This includes applications such as email clients, document editors, and media players. IndexedDB provides a structured way to store and retrieve this data, allowing developers to build powerful and easy-to-use applications that can be used on any device with a web browser.

IndexedDB works by creating a database object within the browser that can store data in key-value pairs. This allows data to be stored in a structured way that can be easily searched and retrieved. IndexedDB also provides a way to create indexes, which can be used to quickly search for specific data within the database. This makes it possible to quickly retrieve data even from large databases.

Creating an IndexedDB Database

Creating an IndexedDB database is a relatively simple process that can be done using JavaScript. The first step is to create a new database object using the window.indexedDB API. This object can then be used to create and manage databases.

//Create a new database object
let db = window.indexedDB.open("myDatabase", 1);

//Create a new object store
db.onupgradeneeded = function(event) {
    let objectStore = event.target.result.createObjectStore("myObjectStore", { keyPath: "id" });
};

In this example, a new database object is created with the name “myDatabase” and a version number of 1. The onupgradeneeded function is used to create a new object store within the database. An object store is similar to a table in a traditional SQL database, and can be used to store data in a structured way.

The createObjectStore method is used to create a new object store with the name “myObjectStore”. The keyPath option is used to specify which property of the object should be used as the key for the store. In this case, the “id” property is used as the key.

Adding Data to an IndexedDB Database

Once a database and object store have been created, data can be added to the store using the put method. This method allows data to be added or updated in the store, depending on whether the key already exists.

//Add data to the object store
let transaction = db.transaction(["myObjectStore"], "readwrite");
let objectStore = transaction.objectStore("myObjectStore");
let data = { id: 1, name: "John Doe", age: 30 };
let request = objectStore.put(data);

//Handle errors and success
request.onerror = function(event) {
    console.log("Error adding data to store");
};
request.onsuccess = function(event) {
    console.log("Data added to store");
};

In this example, a new transaction is created using the transaction method, with the “myObjectStore” object store specified. The objectStore method is then used to retrieve the object store, and a new object with the “id”, “name”, and “age” properties is created.

The put method is used to add this object to the store. If the key already exists, the existing object will be updated with the new data. If the key does not exist, a new object will be created.

Retrieving Data from an IndexedDB Database

Retrieving data from an IndexedDB database can be done using the get method. This method retrieves the object with the specified key from the object store.

//Retrieve data from the object store
let transaction = db.transaction(["myObjectStore"], "readonly");
let objectStore = transaction.objectStore("myObjectStore");
let request = objectStore.get(1);

//Handle errors and success
request.onerror = function(event) {
    console.log("Error retrieving data from store");
};
request.onsuccess = function(event) {
    let data = request.result;
    console.log("Retrieved data:", data);
};

In this example, a new read-only transaction is created using the transaction method, with the “myObjectStore” object store specified. The objectStore method is then used to retrieve the object store, and the get method is used to retrieve the object with the “id” of 1.

If the object is found, it will be returned in the request.result property. If the object is not found, the request.result property will be undefined.

Querying an IndexedDB Database

IndexedDB provides a way to create indexes on object stores, which can be used to quickly search for specific data within the database. Indexes can be created on any property of an object, allowing for flexible querying of the database.

//Create an index on the "name" property
let transaction = db.transaction(["myObjectStore"], "readwrite");
let objectStore = transaction.objectStore("myObjectStore");
objectStore.createIndex("nameIndex", "name", { unique: false });

//Query the object store using the index
let index = objectStore.index("nameIndex");
let request = index.getAll("John Doe");

//Handle errors and success
request.onerror = function(event) {
    console.log("Error querying data from store");
};
request.onsuccess = function(event) {
    let data = request.result;
    console.log("Retrieved data:", data);
};

In this example, a new index is created on the “name” property of the objects in the “myObjectStore” object store. The createIndex method is used to create the index, with the name “nameIndex” and the “unique” option set to false.

The index method is then used to retrieve the index, and the getAll method is used to retrieve all objects in the store with the “name” property equal to “John Doe”. If no matching objects are found, an empty array will be returned.