Articles → HTML 5 → Indexeddb In Html5

Indexeddb In Html5

Indexed DB is a client-side technology that allows web applications to store data locally.

How Indexed DB Stores Data

IndexedDB stores data on the client-side in the form of keypath-object pair where each key path is unique. All the keypath-object pairs are stored in the object store.

Click to Enlarge

Browsers Compatibility With Indexed DB

The following code can test whether your browser supports indexed DB or not.

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) {
	alert("Sorry!Your browser doesn't support IndexedDB");
}

CRUD Operations In Indexed DB

In this article, we will perform the following operations: -

Creating an indexedDB database (display records from indexed DB)
Adding data in indexed DB
Editing data in indexed DB
Deleting data in indexed DB

HTML Code

First, let us look at the HTML code: -

<button id="bCreateDb" text="add">Create or Open DB</button><div><input id="newUser" type="text" /><button id="bAdd" text="add">Add Record</button></div><table id="data" />

In the above code: -

‘bCreateDb’ button is for creating the indexed DB database (or showing all the records in the indexed DB’s object store)
‘newUser’ is used as an input textbox for adding data.
‘bAdd’ button is for adding data in indexed DB
‘data’ table contains the list of records that will be populated on the fly from the object store. With each record, there will be an edit and delete button

Get All Data Function

The following function will get all data from the indexed DB and display on the screen. Here is the code: -

function getAllRecords() {
	var transaction = database.transaction("users");
	var objectStore = transaction.objectStore("users");
	var result = [];
	transaction.oncomplete = function() {
		items = result;
		refreshData();
	};
	objectStore.openCursor().onsuccess = function(event) {
		var cursor = event.target.result;
		if(cursor) {
			result.push({
				Name: cursor.value.Name,
				Id: cursor.key
			});
			cursor.continue();
		}
	};
	return result;
}

function refreshData() {
	var container = $('#data');
	var testData = items;
	container.empty();
	$('<tr/>').appendTo(container).append('<td>Id</td><td>Name</td>');
	for(var i = 0; i < items.length; i++) {
		var tr = $('<tr/>').appendTo(container);
		tr.append('<td>' + testData[i].Id + '</td>');
		tr.append('<td><input type="text" id="record' + testData[i].Id + '" value="' + testData[i].Name + '"/></td>');
		var id = testData[i].Id;
		var newEditButton = '<button id="bEditRecord' + id + '">Edit</button>';
		var newDeleteButton = '<button id="bDeleteRecord' + id + '">Delete</button>';
		var btnEdit = $(newEditButton);
		btnEdit.appendTo(tr);
		var btnDelete = $(newDeleteButton);
		btnDelete.appendTo(tr);
		var editHandler = function(id) {
			return function() {
				editRecord(id);
			}
		}(id);
		var deleteHandler = function(id) {
			return function() {
				deleteRecord(id);
			};
		}(id);
		btnEdit.click(editHandler);
		btnDelete.click(deleteHandler);
	}
}

Adding Data

Here is the code for adding data in the indexed DB.

function addRecord(record) {
	if(database === undefined) {
		alert('Database is not exists');
		return;
	}
	var transaction = database.transaction(["users"], "readwrite");
	transaction.oncomplete = function() {
		getAllRecords();
	};
	var objectStore = transaction.objectStore("users");
	var request = objectStore.put(record);
}

Editing Data

Here is the code for editing data in the indexed DB.

function editRecord(id) {
	var transaction = database.transaction(["users"], "readwrite");
	var objectStore = transaction.objectStore("users");
	transaction.oncomplete = function() {
		getAllRecords();
	};
	var item = {
		Name: $('#record' + id).val(),
		Id: id
	};
	objectStore.put(item);
}

Deleting Data

Here is the code for deleting data in the indexed DB.

function deleteRecord(id) {
	var transaction = database.transaction(["users"], "readwrite");
	var objectStore = transaction.objectStore("users");
	transaction.oncomplete = function() {
		getAllRecords();
	};
	objectStore.delete(id);
}

Output

Picture showing the CRUD operation on the indexed DB

Click to Enlarge

How To Check Indexed DB In Chrome Browser

To check the indexed DB: -

Press F12
Go to the Application tab
Expand Indexed DB (see the following figure)

Picture showing the indexed db in the chrome browser

Click to Enlarge

Full Code

<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>

      var database;
      var items;

      $(document).ready(function () {

          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) {
              alert("Sorry!Your browser doesn't support IndexedDB");
          }

          function addRecord(record) {
              if (database === undefined) {
                  alert('Database is not exists');
                  return;
              }

              var transaction = database.transaction(["users"], "readwrite");

              transaction.oncomplete = function () {
                  getAllRecords();
              };

              var objectStore = transaction.objectStore("users");

              var request = objectStore.put(record);
          }

          function editRecord(id) {
              var transaction = database.transaction(["users"], "readwrite");
              var objectStore = transaction.objectStore("users");
              transaction.oncomplete = function () {
                  getAllRecords();
              };

              var item = { Name: $('#record' + id).val(), Id: id };

              objectStore.put(item);
          }

          function deleteRecord(id) {
              var transaction = database.transaction(["users"], "readwrite");
              var objectStore = transaction.objectStore("users");
              transaction.oncomplete = function () {
                  getAllRecords();
              };

              objectStore.delete(id);
          }

          function getAllRecords() {

              var transaction = database.transaction("users");
              var objectStore = transaction.objectStore("users");

              var result = [];

              transaction.oncomplete = function () {
                  items = result;

                  refreshData();
              };

              objectStore.openCursor().onsuccess = function (event) {
                  var cursor = event.target.result;

                  if (cursor) {
                      result.push({ Name: cursor.value.Name, Id: cursor.key });

                      cursor.continue();

                  }
              };

              return result;
          }

          function createOrOpenDatabase() {
              var request = window.indexedDB.open("testDb", 1);

              request.onupgradeneeded = function (event) {

                  var db = event.target.result;

                  var objectStore = db.createObjectStore("users", { keyPath: "Id", autoIncrement: true });
              };

              request.onerror = function (event) {
                  alert(event.target.errorCode);
              };

              request.onsuccess = function (event) {
                  database = request.result;
                  getAllRecords();
              };
          }

          function refreshData() {
              var container = $('#data');

              var testData = items;

              container.empty();

              $('<tr/>').appendTo(container).append('<td>Id</td><td>Name</td>');


              for (var i = 0; i < items.length; i++) {
                  var tr = $('<tr/>').appendTo(container);

                  tr.append('<td>' + testData[i].Id + '</td>');
                  tr.append('<td><input type="text" id="record' + testData[i].Id + '" value="' + testData[i].Name + '"/></td>');


                  var id = testData[i].Id;

                  var newEditButton = '<button id="bEditRecord' + id + '">Edit</button>';
                  var newDeleteButton = '<button id="bDeleteRecord' + id + '">Delete</button>';

                  var btnEdit = $(newEditButton);
                  btnEdit.appendTo(tr);

                  var btnDelete = $(newDeleteButton);
                  btnDelete.appendTo(tr);

                  var editHandler = function (id) {
                      return function () {
                          editRecord(id);
                      }
                  }(id);

                  var deleteHandler = function (id) {
                      return function () {
                          deleteRecord(id);
                      };
                  }(id);

                  btnEdit.click(editHandler);
                  btnDelete.click(deleteHandler);
              }
          }

          $("#bCreateDb").click(function () {
              createOrOpenDatabase();
          });

          $("#bAdd").click(function () {
              addRecord({ Name: $('#newUser').val() });
          });
      });
    </script></head><body><button id="bCreateDb" text="add">Create or Open DB</button><div><input id="newUser" type="text" /><button id="bAdd" text="add">Add Record</button></div><table id="data" /></body></html>

Posted By -	Karan Gupta

Posted On -	Wednesday, September 6, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**