Articles → HTML 5 → Indexeddb In Html5

Indexeddb In Html5






How Indexed DB Stores Data




Picture showing the graphical representation of how indexed DB stores data

Click to Enlarge


Browsers Compatibility With Indexed DB




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


  1. Creating indexedDB database (display records from indexed DB)
  2. Adding data in indexed DB
  3. Editing data in indexed DB
  4. Deleting data in indexed DB

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" />




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

Get All Data Function




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




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




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




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

Picture showing the CRUD operation on the indexed DB

Click to Enlarge


How To Check Indexed DB In Chrome Browser




  1. Press F12
  2. Go to Application tab
  3. Expand Indexed DB (see the following figure)
  4. 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/FeedbackCharacters remaining 250