Insert data into javascript indexedDB

We can add single or multiple data in the database using the javascript indexedDB function. The indexedDB database inserts data using a unique column id, and increment column id increases the column as per data. The other column inserts value as per user requirement. The unique id, auto-increment id and other column id are required to insert and save data.

The procedure of the insert data into javascript indexedDB

Once you successfully open a connection to the database, we can operate information in the onsuccess event handler.

For example, to insert an object to a database object store, we can follow these steps:

First, open a new transaction.
Second, get an object store.
Third, call the put() method of the object store to insert new information.
Finally, close the transaction connection of the indexedDB database once the operation completes.

Syntax

The following insertData() function saves a new name into the Names object store:

function insertData(db_variable, name) {
    // create a new connection  or new transaction
    const txn_variable = db_variable.transaction('Name', 'readwrite');
    // Save Names object using variable
    const save_data = txn_variable.objectStore('Names');
    let query = save_data.put(contact);
    // handle success call of the indexedDB case
    query.onsuccess = function (event) {
        console.log(event);
    };
    // handle the error of the indexedDB case
    query.onerror = function (event) {
        console.log(event.target.errorCode);
    }
    // close the transaction of the indexedDB database 
    txn_variable.oncomplete = function () {
        db_variable.close();
    };
}

Explanation

You must use the IDBDatabase object's transaction() function to start a new transaction.
A transaction can be opened in either the read-write or readonly mode.
While in readonly mode, you can only read data from the database, read-write mode enables you to access data from the database and write data to the database.
If you only want to read information from a database, it's best to start a read-only transaction.

After creating the insertName() function, you can use the following syntax to use it in the request to store one or more contacts' onsuccess event handler:

The code in the script tag will now run if you view the index.html file in a web browser to:

In the IndexedDB, create the CRM database.
In the CRM database, set up the Names object-store.
Two records should be added to the object store.

Examples

The following examples save single and multiple values. Here, we use the put() method to

Insert the data.

Example 1

The example shows the browsers support the IndexedDb with an event called javascript. The function uses an insert event to store single data.

<!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 insertName(db_variable, name) {
    // create a new transaction
    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);
    // operate the success case of the database
    db_que.onsuccess = function (event) {
        console.log(event);
    };
    // operate the error of the database
    db_que.onerror = function (event) {
        console.log(event.target.errorCode);
    }
     // close the indexedDB database once the transaction completes
    text_data.oncomplete = function () {
        db_variable.close();
    };
}
request.onsuccess = (event) => {
     const db_variable = event.target.result;
     insertName(db_variable, {
         email: 'gacka@outlook.com',
     });
     insertName(db_variable, {
         email: 'sejal@gmail.com',
         });
};
 </script>
</html>

Output

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

Example 2

The example shows the browsers support the IndexedDb with an event called javascript. The function uses an insert event to store multiple columns of data.

<!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>
   </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 insertNames(db_variable, name) {
    // create a new transaction of 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);
    //  operate the success case of the transaction
    db_que.onsuccess = function (event) {
        console.log(event);
    };
    // operate the error of the transaction  
    db_que.onerror = function (event) {
        console.log(event.target.errorCode);
    }
    // close the transaction of the database once operation completed 
       text_data.oncomplete = function () {
        db_variable.close();
    };
}
request.onsuccess = (event) => {
     const db_variable = event.target.result;
       insertNames(db_variable, {
         email: 'gacka@outlook.com',
        Names: 'Gauri sharma',
        Rank: 'fifth',
     });
     insertNames(db_variable, {
         email: 'samntha@gmail.com',
        Names: 'Samantha seth',
        Rank: 'fourth',
         });
};
 </script>
</html>

Output

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

Example 3

The example inserts two Names and Rank columns but does not insert an email column. The function uses an insert event to store multiple columns of data.

<!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>
   </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 insertName(db_variable, name) {
    // create a new transaction of 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);
    //  operate the success case of the transaction
    db_que.onsuccess = function (event) {
        console.log(event);
    };
    // operate the error of the transaction  
    db_que.onerror = function (event) {
        console.log(event.target.errorCode);
    }
    // close the transaction of the database once operation completed 
       text_data.oncomplete = function () {
        db_variable.close();
    };
}
request.onsuccess = (event) => {
     const db_variable = event.target.result;
       insertName(db_variable, {
        Names: 'gauri',
        Rank: '3',
     });
     insertName(db_variable, {
        Names: 'Rani',
        Rank: '2',
         });
    insertName(db_variable, {
        Names: 'Radha',
        Rank: '1',
         });
};
 </script>
</html>

Output

The output image shows the inserted data, and its event calls for the IndexedDB to browsers.

Conclusion

The insert data in the indexedDB is an essential part of saving information. We can use the javascript function with the put() method to insert information.

Next TopicJavaScript Exponentiation Operator

← prev next →