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











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



Click to Enlarge


Click to Enlarge


How to check indexed DB in 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 06, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250