Introduction to IndexedDB

One of the new API that HTML5 has offered us is the IndexedDB API.
It is the way for us to store data inside a browser. The applications using this API can work both online and offline. It is useful in the applications that need large amount of data to be store and don’t need active Internet connection to work.

Asynchronous or Synchronous?
It work asynchronously, so it will never block applications. Originally it included both synchronous and asynchronous APIs. The synchronous API was intended for use only with Web Workers but was removed at later stage due to its usage in the real world.

Size Limit
The only limit to size of the indexedDB Database is the user’s disk space and operation systems. However, Browsers have implemented a warning quota on the size of the Database. In case of breach of the quoto, browser takes user permission for increased space on his disk. You can find latest information on browser specific implementation using the links Firefox , Chrome.

Features

1. IndexedDB databases store key-value pairs.
2. Built on a transactional database model.
3. It uses a lot of requests.
4. Uses DOM events to notify you when results are available.
5. Object-oriented.
6. It does not use Structured Query Language (SQL).
7. Adheres to a same-origin policy.

Using IndexedDB
lets get started with some basic snippets to start using IndexedDB.
How to create/open a DataBase

The above snippet will help in creating a database named ‘testDB’. As it asynchronous in nature, we need to write success and error handlers for handling the request.
To quickly verify whether the DB is created or not we can use ‘Application tab’ in chrome dev tools.
We will talk about the Version as you will see in dev tools in another post.

Creating Object Store/Table
For storing any type of data we first need to create a objectStore(Table) where we can store data at later point of view.
Here, I will create a objectStore and will store some initial data as well.

Here, we are using line no.26 to create a object store named ‘readers’ with unique key ‘userId’. We have also create two indexes ‘name’ and ‘email’ with unique and non-unique parameter. These indexes will help us in later stage to retrieve the result based on these values.
Ideally, these stores are created instantaneously but for safe precautions we can use handler ‘onComplete’(Line no 37) to enter any values in the newly created object store.
We have also created another object store named ‘names’ using key Generator technique.

Here is the visual representation for the data we store in DB.

Here, if we check the object store(names) we created using key generator technique. It is using key value pair mechanism to store the value.
The another object store(readers) we created has the key path equals to ‘userId’. Also, we can check the two indexes we created ‘name’ and ‘email’ under object store.

Lets’ finish this here only, In next part we will discuss how to read, write, update, delete and retrieve the entries from IndexedDB.

Thanks to Mozilla Developer Network (MDN) for the information that I have used in writing this story.