How to get started on using IndexedDB? Beginners guide!

Open your first IndexedDB and store your first data.

27 November, 2022

Contributors

Geremsa Narzary

@bonenzy

IndexedDB - In-build browser storage

1. What is indexedDB?

IndexedDB is a tool present in almost every modern browser nowadays, it is used to store significantly large files on the client side or we can say store data inside a users browser so that those data or information can be searched faster and retrieved when it is required and that information can also be loaded even when offline by the user, indexedDB can make the web application potentially beneficial.

Here's where you can find indexedDB in your browser -

•

Inspect the page.

•

Go to the Application section.

•

And you can find it there.

Indexed Location

2. When to use indexedDB or indexedDB use cases?

•

Before you start using indexedDB unnecessarily at every project, you must know when to use it, although after you use it multiple times you will come to know when to use it and when not to, so a little guide can be helpful.

•

So, when to use indexedDB? Well, its typical use cases are, first of all whenever you have to store, add and edit data offline and synchronize data whenever the network is available. So, it's basically kind of like a save-to-draft feature.

•

And also, whenever you need just temporary storage and don’t require those temporary data to be stored in the server, then IndexedDB can be used as temporary storage.

•

Oh, BTW why indexedDB and not local storage can be a different topic as a whole, but a straightforward reason can be because indexedDB can be much more scalable than LocalStorage.

Now back to the topic “How to use IndexedDB?”

Opening/Creating your first DB in IndexedDB

1. Opening and event handling

At first, when you don't open/connect to the database it doesn't store anything and is empty initially.

Empty DB

To start working with indexedDB, the first step is to connect to the database or open the database, let's see how to do it;

That's all there is on how to open the database, what you need is just - indexedDB.open(param1, param2); param1 is where you give the name of the database and param2 is the version of the DB. So, it looks like this- indexedDB.open(name, version);

The Opened DB

Note that if the 2nd parameter is not filled it will select the default version for itself.

Congratulations you have connected/opened indexedDB 🎉... Or maybe not! Well, let's dive more into it.

Console.log(openRequest)

In the above image, you can see there are some keywords like onblocked, onsuccess, onupgradeneeded. They are actually event handlers and we need to listen to this events, let's see what this events do, I will try to explain them in the most basic way:

onerror -> It is the event that is triggered whenever there is an error opening/connecting to the database, although there is very less chance of the request failing in indexed, but yes this event is triggered whenever there is an error opening the DB. Let's look into it with a code sample -

A simple example of an error event at work is whenever we downgrade the version of DB it can be seen.

Here my initial version was 3 and later I tried to change it to 1

onsuccess -> It is the event that is triggered whenever the IDBRequest succeeds. Let's look into it with a code sample -

The event is automatically triggered whenever the request is successful

onupgradeneeded -> This event is fired/triggered when a bigger version than the existing version is loaded.

Only if onupgradeneeded handler finishes without errors, openRequest.onsuccess triggers, and the database is considered successfully opened.

2. Object Stores/Structuring the database

Now, let's structure the database through object stores. Also, check out IDBObjectStores for details of different types properties and methods.
Now let us check out its use cases, don't worry we will be discussing briefly whatever method or property we use along the way.

Let's see a basic example of opening the DB, listening to events, creating stores, and inserting some data into the DB.

The DB with object stored

•

As you can see when I clicked the "Insert Data" button the DB was opened and the objects were stored.

•

Now, let's click on the "Delete Data" button.

DB deleted

•

As you can see nothing is here and it's empty again.

Congratulations 🎉 you have learned to open indexedDB, insert data into it, and delete the Database. Now you are one step into learning how to work with indexedDB.

And now you can learn how to do CRUD operations on indexedDB, about transactions, and much more. I didn't include them in this blog as I tried to make it as simple as possible and just to give an overview of how to start working with IndexedDB.

Conclusion/Summary of this blog

In this blog, I have tried to explain everything in the simplest way that I have learned about indexedDB from different docs and youtube videos

What have we talked about in this blog:

•

An overview of what is IndexedDB.

•

When to use IndexedDB.

•

Opening the DB and some major event handlers.

•

Object Stores which in other databases are called "tables".

•

All the topics discussed are backed up with image examples.

Lastly, what I want to say is don't worry about how much you know or learned just start out with whatever plan you have most others things come along as you go. #longliveMDNdocs, #longliveStackOverflow XD. Happy Learning folks

javascript

database

develevate

howto

indexeddb