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











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













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










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