IndexedDB _ Indexed Database API - Tuong-Nguyen/Angular-D3-Cometd GitHub Wiki

What?

  • IndexedDB is a transactional database embedded in the browser
  • The database is organised around the concept of collections of JSON objects similarly to NoSQdatabasesMongoDBorCouchDB`. Each object is identified with a key generated during insert.
  • An indexing system optimizes access to stored objects
  • IndexedDB API is mostly asynchronous

Supported browsers

Supported browsers http://caniuse.com/#feat=indexeddb

Use cases

  • Designed to work with significantly larger amounts of data.
  • Can be used for browser implemented functions, such as bookmarks, as well as web applications, such as email.

How to use

Check IndexedDB support browser

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 a stable version of IndexedDB.")
}

Open an IndexedDB database

   var request = window.indexedDB.open("newDatabase", 1);
  • The open() function returns an IDBOpenDBRequest object with a result (success, error, upgradeneed) that you handle as an event
  • The result for the open() function is an instance of an IDBDatabase
  • The second parameter is version of the database.
    • If the database doesn't already exist, it is created by the open() operation, then an onupgradeneeded event is triggered and we create the database schema in the handler for this event.
    • If the database does exist but we are specifying an upgraded version number, an onupgradeneeded event is triggered straight away, allowing you to provide an updated schema in its handler.

request's events

  • onerror
         request.onerror = function(event) {
           // Generic error handler for all errors targeted at this database's requests!
           alert("Database error: " + event.target.errorCode);
         };
  • onsuccess
         request.onsuccess = function(event) {
            db = request.result;
         };
  • onupgradeneeded
         // This event handles the event whereby a new version of the database needs to be created
         // Either one has not been created before, or a new version number has been submitted via the
         // window.indexedDB.open line above
         request.onupgradeneeded = function(event) {
            var db = event.target.result;
            var objectStore = db.createObjectStore("employee", {keyPath: "id"});
            
            for (var i in employeeData) {
               objectStore.add(employeeData[i]);
            }
         }
    • keyPath: defines where the browser should extract the key from in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods or an array containing any of those. It cannot include spaces.
    • key generator
    • in-line key
    • out-of-line key

Adding the data

   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "[email protected]" });
   
   request.onsuccess = function(event) {
      alert("Prasad has been added to your database.");
   };
   
   request.onerror = function(event) {
      alert("Unable to add data\r\nPrasad is already exist in your database! ");
   }

transaction

  • An atomic set of data-access and data-modification operations on a particular database.
  • Any reading or changing of data in the database must happen in a transaction
  • The scopes of read-only transactions can overlap and execute at the same time.
  • The scopes of writing transactions cannot overlap

Retrieving data

Get a record

            var request = db.transaction(["employee"])
            .objectStore("employee")
            .get("00-03");
            
            request.onerror = function(event) {
               alert("Unable to retrieve daa from database!");
            };
            
            request.onsuccess = function(event) {
               // Do something with the request.result!
               if(request.result) {
                  alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
               }
               
               else {
                  alert("Kenny couldn't be found in your database!");
               }
            };

Get all

            var objectStore = db.transaction("employee").objectStore("employee");
            
            objectStore.openCursor().onsuccess = function(event) {
               var cursor = event.target.result;
               
               if (cursor) {
                  alert("Name for id " + cursor.key + " is " + cursor.value.name + ", Age: " + cursor.value.age + ", Email: " + cursor.value.email);
                  cursor.continue();
               }
               
               else {
                  alert("No more entries!");
               }
            };

Updating data

var objectStore = db.transaction(["employee"], "readwrite").objectStore("employee");
var request = objectStore.get("00-03");
request.onerror = function(event) {
  // Handle errors!
};
request.onsuccess = function(event) {
  // Get the old value that we want to update
  var data = event.target.result;
  
  // update the value(s) in the object that you want to change
  data.age = 42;

  // Put this updated object back into the database.
  var requestUpdate = objectStore.put(data);
   requestUpdate.onerror = function(event) {
     // Do something with the error
   };
   requestUpdate.onsuccess = function(event) {
     // Success - the data is updated!
   };
};

Removing data

            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .delete("00-03");
            
            request.onsuccess = function(event) {
               alert("Kenny's entry has been removed from your database.");
            };

IndexedDB's search limitations

  • There is the way

    • IDBKeyRange.only() - exact match (case sensitive!)
    • IDBKeyRange.bound() - Find all objects where key is within given range
    • IDBKeyRange.upperBound() - Find all objects where key is lower than given key
    • IDBKeyRange.lowerBound() - Find all objects where key is greater than given key

  • There is no way

    • Case insensitive searh
    • Find all objects where key is any of ("a", "b", "c" or "d") (SQL 'IN')
    • Find keys that contains a given substring (SQL LIKE)
    • Logical OR or AND
    • Etc... ( the list could be long...)

Makes some magic:

References

Conclusion

What we can talk about IndexedDB are:

  • Asynchronous
  • Transactions
  • NoSQL