How To Use Indexed DB To Improve Page Load Performance

Introduction

Indexed DB is a local storage system which stores data in client-side on the browser. This is useful for applications that require storing a large amount of the data. These applications can run more efficiently and can load faster.

Objective

The main objective of this indexed DB is to improve the performance of the page load. It avoids the number of calls to retrieve the data from the database

How Indexed DB works?

• First time when page loads, it calls the data from the database and stores the data in the indexed DB.
• When again calling for the same record, it will load from the indexed DB instead of the load from the database. So, the application can run more efficiently and load faster.
• Since the indexed DB gets updated on every call, it will have the updated data just same as in the database.
• Since it displays the data from the indexed DB and then calls to the database on the page load, the application can improve the load performance.

Things to know before starting with Indexed DB

1. To start working with indexed DB, we must check whether our browser supports indexed DB or not.
2. We must be aware of the below methods.
3. Push the data to indexed DB when data comes from the database for the first time.
4. Pull data from the indexed DB when data is already existing in the indexed DB.
5. Filter the data based on the requirement.
6. Update the indexed DB based on the changes.

Step 1. Check browser compatibility

Check the browser compatibility by running the below code.

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;  
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;  
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange  
if (!window.indexedDB) {  
    window.alert("Your browser doesn't support IndexedDB.")  
}  

Step 2. If the browser supports the indexed DB, write a code for adding the retrieved data to the indexed DB.

Code for adding the data into indexed DB.

var dbName = "MyDB";  
var request = indexedDB.open(dbName);  
request.onerror = function(event) {  
    // Handle errors.  
};  
request.onupgradeneeded = function(event) {  
    db = event.target.result;  
    objectStore = db.createObjectStore("Discussions", {  
        keyPath: "ID"  
    });  
    objectStore.createIndex("ID", "ID", {  
        unique: false  
    });  
    objectStore.transaction.oncomplete = function(event) {  
        customerObjectStore = db.transaction("Discussions", "readwrite").objectStore("Discussions");  
        for (var i in customerData) { /* where the customerData is our retrieved Data*/  
            customerObjectStore.add(customerData[i]);  
        }  
    };  
}; 

Then, call the functions in the success event of request, as shown below.

request.onsuccess = function(evt) {  
    db = evt.target.result;  
    add(); /*this is to push the current data to the existing data in the indexed DB*/  
    GetAll(); /* to get the all data fron the indexed dB*/  
    CheckForCurrentData(DataFromIndexedDB); /* filter the particular record from the indexed DB*/  
    updateResult(DiscID); /* update a record in the indexed DB*/  
    Delete(DiscID); /* Delete a record in the indexed DB*/  
} 

The mentioned functions are defined as following

Code for pushing another retrieved data to the existing indexed DB data.

This is a call to push the SharePoint list data to indexed DB. By using the following code, you can push the data from SharePoint list and you can store it in your indexed DB.

function add() {  
    for (var i = 0; i < customerData.length; i++) {  
        request = db.transaction(["Discussions"], "readwrite").objectStore("Discussions").add(customerData[i]);  
    }  
}  

Code to get the all the indexed DB data.

function GetAll() {  
    objectStore = db.transaction("Discussions").objectStore('Discussions').getAll();  
    objectStore.onsuccess = function(event) {  
        DataFromIndexedDB = event.target.result;  
    }  
}  

Code to get the particular ID data from the indexed DB.

function CheckForCurrentData(DataFromIndexedDB) {  
    var CurrentPageData = [];  
    for (var i = 0; i < DataFromIndexedDB.length; i++) {  
        if (DataFromIndexedDB[i].ParentId == RecordId) {  
            CurrentPageData.push(DataFromIndexedDB[i]);  
        }  
    }  

Code to update a record in the indexed DB.

function updateResult(DiscID) {  
    console.log(DiscID);  
    var transaction = db.transaction(['Discussions'], 'readwrite');  
    var objectStore = transaction.objectStore('Discussions');  
    objectStore.openCursor().onsuccess = function(event) {  
        var cursor = event.target.result;  
        console.log(cursor);  
        if (cursor) {  
            if (cursor.value.ID === DiscID) {  
                var updateData = cursor.value;  
                updateData.ReplyCount = updateData.ReplyCount + 1;  
                var request = cursor.update(updateData);  
            };  
        }  
    };  
}; 

Code to delete a record in the indexed DB

function Delete(DiscID) {  
    var request = db.transaction(["Discussions"], "readwrite").objectStore("Discussions").delete(DiscID);  
} 

References for the above files

Please add the following JS file to your code to support some methods while using Internet Explorer.

<script src=” https://github.com/dumbmatter/IndexedDB-getAll-shim”></script> 

Note. Here, I chose SharePoint as an environment and Angular JS as JS file to do crud operations on the SharePoint list. You can use your desired environment and JavaScripts to perform operations on the actual database, instead of SharePoint and AngularJS.

Conclusion

This article will help you improve the page load performance and the crud operations on the indexed DB.