IndexedDB: Browsers Store

Store the data in the users browser

HTML5 concept to store data

IndexedDB API is a new concept by HTML5, to store data in the user's browser.

What is IndexedDB?

IndexedDB is a large-scale, NoSQL storage system. It allows storing large amounts of data in the user's browser.

IndexedDB is more powerful than Localstorage. It is useful for applications that require to store a large amount of the data and faster loading speed.

Why IndexedDB?

• IndexedDB stores data in the form of a key-value pair.
• It is a NoSQL data storage system for storing data in the browser.
• It’s an asynchronous API, which means that you can perform multiple operations simultaneously and performing other operations won’t block the UI thread which might affect the user experience.
• It can store a large amount of data, but different browsers handle different limits.
• It uses indexes to enable high-performance searches of the data.
• It is supported by all modern browsers.
• A database is private to a specific domain so that other sites cannot access the database from another website that IndexedDB stores.

Terms in IndexedDB:

1) Database:

The database in IndexedDB contains the data we would like to store. We can create multiple databases, but generally, there is one database per application.

2) Version:

When the database is created for the first time, it’s version is 1. The database has only one version at a time and it can’t exist for multiple versions at once.

3) Object Store:

An object store is nothing but an individual bucket to store the data. It is similar to tables that we create in relational databases to store data.

4) Index:

An index is simply a unique value that is used to retrieve records in the object-store.

For example, if we’re storing blogs, we may want to fetch those blogs later by their title, author, or blogId.

5) Operation:

It is nothing but the interaction with the database.

6) Transaction:

The transaction is a way of interacting with the data in a database. The transaction is used whenever we want to perform any read or write operation to the database. It represents an atomic and durable set of data access and data mutation operations. A transaction has a scope within which the transaction may interact. A transaction’s scope remains for that transaction only. The transaction has a mode that is used to identify which type of operation is allowed to perform on the data. The transaction can be readonly, readwrite or versionchange.

How to get started?

First, we need to check whether the browser has IndexedDB support.

if (!('indexedDB' in window)) {
    console.log('This browser doesn\'t support IndexedDB');
    return;
}
else {
    // perform your operations
}

Then, create a database.

idb.open(name, version, upgradeCallback)

Here, we need to specify the name of the database and version number. The callback function will get executed if the version number of the database specified is greater than the version of the existing database.

Now create an object-store.

databaseName.createObjectStore('blog');

We can also specify the unique key as

databaseName.createObjectStore(
    'blog', {
        keyPath:'blogId',
        autoIncrement:true
    }
);

Here, keyPath helps in setting a primary key for object and autoIncrement is for incrementing a unique value(index) automatically.

We can define the index to retrieve data from the reference object store by a specified property. createIndex method creates and returns an index object.

objectStore.createIndex(‘indexName’, ‘property’, options);

For creating data in the object-store we can use add method on object-store.

someObjectStore.add(data, optionalKey);

For reading or accessing data in the object-store, we can use get method of object-store. The get method requires the primary key of the object to retrieve data from the store.

someObjectStore.get(primaryKey);

We can also get all the data with the getAll method.

someObjectStore.getAll();

To update the data. we can use the put method as:

someObjectStore.put(data, optionalKey);

The put operation is quite similar to add operation.

To delete the data, we use the delete method of the object-store.

someObjectStore.delete(primaryKey);

We can also delete the complete database by using the deleteDatabase method.

indexedDB.deleteDatabase(name);

You can try the example for IndexedDB from the GitHub repository.

Enjoy Coding, 😊