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:

Databases

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.

Indexes

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: javatpoint.com
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

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> JavaScript IndexedDB </title>
</head>
<body>
<script src = "pathname/js/filename.js"> </script>
Or
<script> //javascript indexedDB code </script>
</body>
</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.

if (!window.indexedDB) {
    console.log(` Your browser does not accept IndexedDB`);
    return;
}

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.

request_variable.onerror = function(event) {
console.log(" The function shows error! ");
};

Error: failing to open error.

request_variable.onsuccess = function(event) {
console.log(" The function shows success! ");
};

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.

// create the names object store and indexes
 request.onupgradeneeded = (event) => {
     let db_variable = event.target.result;
     // create the Name object store 
     // with auto-increment id
     let store_varible = db_variable.createObjectStore('Rank', {
         autoIncrement: true
     });
     // create an index on the rank property
     let index = store_varible.createIndex('name', ' name', {
         unique: true
     });
 };

How it functions

Get the IDBDatabase object first, and then add it to the db_variable from the event.target.result.

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.

Examples

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.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
<p id = "demos"> </p>
</body>
<script>
if (!window.indexedDB) {
console.log("The browser does not support IndexedDB");
alert("Your browser does not support IndexedDB");
document.getElementById("demos").innerHTML = "Your browser does not support IndexedDB";
}else{
console.log("Your browser support IndexedDB");
alert("Your browser support IndexedDB");
document.getElementById("demos").innerHTML = "Your browser support IndexedDB";
}
</script>
</html>

Output

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

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.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
<p id = "demos"> </p>
<p id = "demo2"> </p>
</body>
<script>
if (!window.indexedDB) {
document.getElementById("demos").innerHTML = "Your browser does not support IndexedDB";
}else{
document.getElementById("demos").innerHTML = "Your browser support IndexedDB";
}
var request_variable = window.indexedDB.open("newData", 1);
request_variable.onerror = function(event) {
console.log(" The function shows error! ");
document.getElementById("demo2").innerHTML = "The function shows error!";
};
request_variable.onsuccess = function(event) {
console.log(" The function shows success! ");
document.getElementById("demo2").innerHTML = "The function shows success!";
};
request_variable.onupgradeneeded = function(event) {
console.log(" The function shows upgraded! ");
}
</script>
</html>

Output

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

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.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
<p id = "demos"> </p>
<p id = "demo2"> </p>
<p id = "demo3"> </p>
</body>
<script>
if (!window.indexedDB) {
document.getElementById("demos").innerHTML = "Your browser does not support IndexedDB";
}else{
document.getElementById("demos").innerHTML = "Your browser support IndexedDB";
}
var request_variable = window.indexedDB.open("newData", 1);
request_variable.onerror = function(event) {
console.log(" The function shows error! ");
document.getElementById("demo2").innerHTML = "The function shows error!";
};
request_variable.onsuccess = function(event) {
console.log(" The function shows success! ");
document.getElementById("demo2").innerHTML = "The function shows success!"+request_variable;
};
</script>
</html>

Output

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

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.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
<p id = "demos"> </p>
<p id = "demo2"> </p>
<p id = "demo3"> </p>
</body>
<script>
if (!window.indexedDB) {
document.getElementById("demos").innerHTML = "Your browser does not support IndexedDB";
}else{
document.getElementById("demos").innerHTML = "Your browser support IndexedDB";
}
//the database name with the second version 
var request_variable = window.indexedDB.open("newData2", 2);
request_variable.onerror = function(event) {
console.log(" The function shows error! ");
document.getElementById("demo2").innerHTML = "The function shows error!";
};
//the transaction of the database successfully
request_variable.onsuccess = function(event) {
console.log(" The function shows success! ");
document.getElementById("demo2").innerHTML = "The function shows success!"+request_variable;
};
//the indexedDB database upgrade with the version
request_variable.onupgradeneeded = function(event) {
console.log(" The function shows upgraded! ");
document.getElementById("demo3").innerHTML = "The function shows upgraded!";
}
</script>
</html>

Output

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

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.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
<p id = "demos"> </p>
<p id = "demo2"> </p>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object store
// with auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
// create an index on the email property,
let index_data = store_variable.createIndex('email', 'email', {
unique: true
});
};
function insertContact(db_variable, name) {
// create a new transaction for the database
const text_data = db_variable.transaction('Names', 'readwrite');
// get the Names object store_variable
const store_variable = text_data.objectStore('Names');
let db_que = store_variable.put(name);
// handle success of the transaction
db_que.onsuccess = function (event) {
console.log(event);
};
// handle the error of the transaction
db_que.onerror = function (event) {
console.log(event.target.errorCode);
}
// close the database when the transaction completes
text_data.oncomplete = function () {
db_variable.close();
};
}
request.onsuccess = (event) => {
const db_variable = event.target.result;
const db_variable1 = event.target;
const db_variable2 = event.type;
console.log("create object and store data " +db_variable);
console.log("create object and get target " +db_variable1);
console.log("create  type object "+ db_variable2);
};
</script>
</html>

Output

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

Summary

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.

Next TopicJavascript offsetX property

← prev next →