IndexDB Adventure Part-1

IndexDB Adventure Part-1

After following through various courses for learning web development, I finally landed on PWA’s through Google Udacity Challenge Scholarship in Mobile Web Specialist track.

Before I avoided IndexDB because of the inherent feeling that it would be hard, but that isn’t the case, so let’s not wait any longer and dive into it.

This article will be covering the basics of Indexdb.



What is IndexDB??

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. IndexDB is a transactional database embedded in the browser. The database is organized around the concept of collections of JSON objects similarly to NoSQL databases such as MongoDB. Each object is identified with a key generated during insert. An indexing system optimizes access to stored objects.

Now that out of the way, let’s check the various components and methods that are in IndexDB

Database

It is the top most of IndexDB. It basically is a collection of databases that you create. Usually there is only one database per app but not necessary. We store everything there.

Object Stores

They are similar to documents in mongoDB or tables in relation databases. Like various models, there can be multiple Object stores for various aspects like users and projects for an app that displays projects that are stored in it. Data types of data within the store do not need to be consistent.

Transactions

For writing or reading anything into the database, we will need to start a transaction and then do read or write or both. In other words, it supervises all interactions that are performed on the database, so as to preserve database integrity. If any of the operations fail, all of the operations that are done or will be performed in the transaction will be cancelled.

Cursor

Used to iterate through the records in the database

Finally, it’s time to write some code

First and foremost, it is essential to check browser support.

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

Creating the database

var dbPromise = idb.open('couches-n-things', 1,upgradeCallback);

Now, explaining the above code, idb.open() opens up a database in the indexDB.

The first parameter is the name of the indexDB, the second parameter is for the version of the database, the third is the upgrade callback function, it is excecuted whenever there is a new version.

Create an Object Store

var dbPromise = idb.open('database2', 1, function(upgradeDb) {
    console.log('making an object store');
    if (!upgradeDb.objectStoreNames.contains('ObjectStore1')) {
      upgradeDb.createObjectStore('ObjectStore1');
    }
});

The above code makes an Object store in which you can store the data

We can customise the Object Store with some options, like

upgradeDb.createObjectStore('logs', {keyPath: 'id', autoIncrement:true});

keypath is similar to primary key in SQL or the _id in mongoDB, that is the field next is considered to be unique.

That is all for this article.

In this article, you have learned what are the various things that compromise indexDb and how to make databases and object stores.

In the next article, starting a transaction, ordering data according to a field(indexes), how to read and write data into the database will be explained.

Stay tuned for more…