IndexedDB: Step by step
Tags: javascript, webdev, programming, 100daysofcode
Published: 2022-01-04 15:56:06

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](https://dev.to/pandresdev/create-a-database-with-indexedbd-1f1j)

## 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](https://dev.to/pandresdev/create-a-database-with-indexedbd-1f1j) is used.

Summary of the [previous chapter](https://dev.to/pandresdev/create-a-database-with-indexedbd-1f1j):

```jsx
// 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.

```jsx
// 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');
//...
```