Javatpoint Logo
Javatpoint Logo

JavaScript indexedDB

A sizable object store integrated into the browser is called IndexedDB. Using key-value pairings, the IndexedDB enables you to store the data persistently. Any JavaScript type, such as boolean, number, text, undefined, null, date, regex, object, array, blob, and files, may be used as the value.

A sizable object kept in web browsers is the IndexedDB. Key-value pairs are how the IndexedDB stores data. Any data, both primary and complex, can be used as values.

Why is indexedDB used?

  • You can build web apps with IndexedDB that function both online and off.
  • Applications that need to store a lot of data but don't require a constant internet connection can benefit from it.
  • As an illustration, Google Docs uses IndexedDB to maintain the cached content in the browser and periodically synchronizes with the server. This improves user experiences while enabling Google Docs to perform better.
  • Additionally, you can discover various programmes like online notepads, code sandboxes, tests, to-do lists, and CMS that primarily utilize IndexedDB.

IndexedDB architecture

The design of the IndexedDB is shown in the following image:

JavaScript indexedDB


The most advanced level of IndexedDB is a database. One or more than one object storage is found in databases.

Single or multiple databases may be present in the IndexedDB. For the web application, you generally construct one database.

Object Stores for datas

You can use object storage as a bucket to keep the data and related indexes organized. It works similarly within SQL databases.

Records that are kept in key-value pairs are kept in object storage.


Data may be searched for using an object's properties thanks to indexes. In a technical sense, you build indexes on object stores known as parent object stores.

For instance, if you are storing contact information, you might want to make indexes for the contact email, full name, and address so that you can search for them using these criteria.

Principles of IndexedDB

The IndexedDB's fundamental concepts are briefly explained below:

1) IndexedDB databases keep key-value pairs.

The values stored in the IndexedDB, as opposed to localStorage and sessionStorage, can be complicated structures like objects and blobs.

Keys can also be binary items, or they can be the characteristics of these things.

Any property of the objects can be used to generate indexes for easy searching and sorting.

2) IndexedDB supports transactions

A transaction always takes place while reading from or writing to an IndexedDB database.

Users who launch a web-based application in two tabs or windows at once and read from the database and write the same database are protected by the transactional model, which guarantees data integrity.

3) The IndexedDB API is primarily asynchronous.

Asynchronous operations are used by IndexedDB. When an operation is finished, and the output is accessible, it notifies you using DOM events.

4) The NoSQL system IndexedDB

NoSQL technology is used by IndexedDB. To query data, it does not utilize SQL, in other words.

It makes use of the cursor-returning query instead. Then, you may iterate the result set using the pointer.

5) IndexedDB adheres to the same-origin rule

An origin is the URL of the page that contains the protocol, domain, and port where the code is executed.

  • domain:
  • protocol: https
  • port: 443

IndexedDB follows the same-origin principle. It implies that every origin has a unique collection of databases. Additionally, one origin is unable to access databases from different sources.

Develop the project structure in steps.

  • First, make an indexeddb folder in a new folder. Make a new subfolder called js inside the indexeddb folder.
  • Second, Create javascript in the js folder and the html file in the indexeddb folder.
  • Third, insert the <script> tag in the index.html file to link to the app.js file or use the <script> tag for the javascript code.

Filename: Demo.html

Fundamental IndexedDB operations

The following provides an overview of the fundamental operations of IndexedDB databases, including.

  • Establishing a database connection
  • Adding something to the object storage.
  • Taking information out of the object store.
  • Iterating through a set of results using a cursor.
  • Removing a piece of data from the object database.

Let's first construct the project structure before creating a connection in the IndexedDB database.

The following steps work for the indexedDB operation and setup.

1) Verify whether the IndexedDB is supported.

The code that follows verifies a web browser's support for the IndexedDB. This may not be required any longer because the majority of contemporary web browsers accept or support the IndexedDB.

2) Open the database

The open() method of the browser is used to make a connection to a database.

Two arguments can be passed to the open() function.

  • The 'tutorial_data' is the indexedDB database name.
  • The 1 is the indexedDB database version.

The IDBOpenDBRequest interface's open() method takes a request object that is an instance of that interface.

The call returns an object called openRequest, and we should watch for events on it:

  • Success: it is displayed that the database is prepared. The "database object" is present in the openRequest.result and used for subsequent calls.
  • Error: failing to open error.

3) Establish object stores

  • The onupgradeneeded event can be raised when you first open the database.
  • The onupgradeneeded event also occurs if the database is opened on a second attempt with a version that is higher than the current version.
  • The "onupgradeneeded event handler" can be used to initialize the object storage and indexes for the initial time.
  • For instance, the Contacts object store and its index are created by the following onupgradeneeded event handler.

How it functions

Get the IDBDatabase object first, and then add it to the db_variable from the

The auto-increment id

The Name object storage with the auto-increment key should then be created by calling the createObjectStore() function a second time.

For each new object entered into the Name object store, the IndexedDB_VARIABLE can create an auto-increment number as the key, starting at one.

  • To establish an index on the rank property, execute the createIndex() method third.
  • Since each rank is distinct, so too should the index.
  • You achieve this by passing the createIndex() method's third argument, (unique: true).

4) Use insert, read, and delete data using the object store

Users can insert, read, delete, and operate database information using the javascript function and indexedDB method.


The following examples show the IndexedDb operation, functions and output. Here we can see the basic operation and its working procedure with different examples.

Example 1

The example shows whether the browsers support the IndexedDb or not using the JavaScript function.


The output image shows the result of supporting IndexedDB to browsers.

JavaScript indexedDB

Example 2

The example shows the browsers support the IndexedDb with an event called javascript. The function gets error, success, or upgraded event called or not. If the database operates and maintains data successfully, then the success function works in the javascript-indexedDB.


The output image shows which event called for the IndexedDB to browsers.

JavaScript indexedDB

Example 3

The example shows the browsers support the IndexedDb with an event called javascript. The function gets an error function after getting any error. If any error shows in the indexedDB with the availability and other methods, then onerror function works in the javascript.


The output image shows an error message from the IndexedDB to browsers.

JavaScript indexedDB

Example 4

The example shows the browsers support the IndexedDb with an event called javascript. The function gets an upgrade function after the updated database version. If you change the database version from 1 to 2, then the onupgradeneeded function.


The output image shows an upgraded message in the IndexedDB to browsers.

JavaScript indexedDB

Example 5

The example shows the browsers support the IndexedDb with an event called javascript. The function uses to establish an object to operate data. The auto-increment and unique data variables are created in the database.


The output image shows which event called for the IndexedDB to browsers.

JavaScript indexedDB


The databases make up the IndexedDB. Object storage exists in each database. Typically, one IndexedDB database is created for each web application.

Web applications that don't need a constant internet connection can benefit from using the IndexedDB, especially those that can operate both online and offline.

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA