Indexed Database API - Initail

As a front web developer, I could create UI faster or Optimize file to load page faster. But it hard to faster response time form server however 80-90% of the end-user response time is spent on the frontend. Nowadays we could use the Indexed Database API, or IndexedDB to reduce the request times. Less request times, less response time.

What is IndexedDB ?

IndexedDB is web browser standard interface for a local database of records holding simple values and hierarchical objects. IndexedDB was initially proposed by Oracle in 2009./*wiki*/

What browsers would support IndexedDB ?

Most browsers of hybrid devices support it exclude IE9-, Safari 7-,iOS Safari 7.1-, Opera Mini, Android Browser 4.3-./*caniuse.com*/

When shall we use IndexedDB ?

1. Save Money on web hosting
2. Data index sort
3. Data keyword search
4. Keep data for period of time

How to start it?

//***************************************************************
//initDB
//{Object}, {data: dbName, objectStore: storeName, version: number}, the database info include db name, store name and db version.
//**************************************************
function initDB(data) {
    var targetDB = {}; 
    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
    var nameStore = data.hasOwnProperty("objectStore") ? data.objectStore : "list";
    var nameDB = data.hasOwnProperty("db") ? data.db : data;
    var dbVersion = data.hasOwnProperty("version") ? data.version : "2";

    if ('webkitIndexedDB' in window) {
        window.IDBTransaction = window.webkitIDBTransaction;
        window.IDBKeyRange = window.webkitIDBKeyRange;
    }  
     
    targetDB.indexedDB = {};
    
    targetDB.indexedDB.open = function() {
        var request = indexedDB.open(nameDB, dbVersion);
        request.onsuccess = function(e) {
            console.log ("success our DB: " + nameDB + "/" + nameStore + " is open and ready for work");
            targetDB.indexedDB.db = e.target.result;
        }
        request.onupgradeneeded = function(e) {
            //You could add newItem object to the object store through IDBTransaction --> see more
            //Implement when create store
            //Implement when upgrade store version

            targetDB.indexedDB.db = e.target.result;
            var db = targetDB.indexedDB.db;
            console.log ("Going to upgrade our DB from version: "+ e.oldVersion + " to " + e.newVersion);
            db.onerror = function () {
                console.log("Error loading database.");
            }
            var store = db.createObjectStore(nameStore, {keyPath: "item_no"});
            store.createIndex("item_desc", "item_desc", {unique: false});
        }
        request.onfailure = function(e) {
            console.error("could not open our DB! Err:"+e);
        }
        request.onerror = function(e) {
            console.error(nameDB + ":Well... How should I put it? We have some issues with our DB! Err:"+e);
        }
    }
    
    targetDB.indexedDB.open();

}

initDB("test");

What's a helper library?

I have used Jquery IndexedDB Plugin.But it not work well in Safari and have to use it with jQuery. Here is a shopping car example.