Articles → HTML 5 → Indexeddb In Html5
Indexeddb In Html5
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
- 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
<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" />
- ‘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
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
Click to Enlarge
Click to Enlarge
How To Check Indexed DB In Chrome Browser
- Press F12
- Go to the Application tab
- Expand Indexed DB (see the following figure)
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>
Try It