IndexedDB: Step by step

Before starting, I want to tell you that this post will try to explain in the simplest way what IndexedBD is and how it works. Therefore, to maintain order there will be links to other posts where the steps for creating a database in IndexedDB will be explained in detail.
Without further ado, I hope it will be very helpful.

What is IndexedDB?

To put it simply, IndexedDB is an API for client-side storage. Although there is a Web Storage API (sessionStorage and localStorage), it is not very useful when we have to store large amounts of data mantainnig a certain structure.

This database system works off transaction (we will talk about this later) and is object-oriented.

An important aspect is that the transactions are asynchronous and work under the concept of requests that are linked to the operations to be executed and returns an event once they are resolved.

In short, IndexedDB is a transactional database system that stores structured information within a browser.

Creating a Database

When starting with this database system it is necessary to open a connection, then specify the Database Schema that it will have, this refers to the structure of the objects that will be stored, and finally, carry out the desired transactions. One of the most noteworthy advantages of IndexedDB is that, being independent of whether there is internet connection or not, the application can work both online and offline.

The following post explains the creation of a database with IndexedDB to persist the data in users' browsers.

Create a database with IndexedDB

Transactions

Before carrying out any operation on the database (add, delete, get, put) it is necessary to create a transaction, since it will specify which "tables" (Object Stores) will be part of the transaction, as well as the type of access that will be used to perform the transaction, for this the transaction(storeNames, mode) method of the IDBDatabase object is used, so the connection created previously is used.

Summary of the previous chapter:

// Database connection (IDBDatabase)
let db;

function createDatabase() {
    //...

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

    request.onsuccess = (e) => {
        // Create the DB connection
        db = request.result;
    };

    //...
}

// Create a transaction
const transaction = db.transaction('students', 'readonly');

//...

The transaccion(storeNames, mode) method has the following parameters:

• storeNames: This parameter refers to the Object Stores (tables) that are part of the transaction, the value is an array with their names. However, if only one Object Store will be used, the value can be a string.

• mode: This parameter indicates the type of access that will be used to carry out the transaction, this can be readonly (default) or readwrite.

Finally, the transaction returns an object that contains the objectStore(storeName) method which is used to access to each Object Store (table) and carry out the respective operations.

// Database connection (IDBDatabase)
let db;

function createDatabase() {
    //...

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

    request.onsuccess = (e) => {
        // Create the DB connection
        db = request.result;
    };

    //...
}

// Create a transaction
const transaction = db.transaction('students', 'readonly');

transaction.oncomplete = function(event) {
  // This event will be executed when
  // the transaction has finished
};

transaction.onerror = function(event) {
  // Handling Errors
};

// Access to the "students table"
const objectStore = transaction.objectStore('students');
//...