Indexed DB examples (PhoneGap (OR) HTML5 , Javascript )


  • Examples of IndexedDB (CRUD operations).

    PhoneGap (OR)  HTML5 , Javascript 

    • Edited by rsunilkumar Tuesday, January 21, 2014 10:33 AM
    Tuesday, January 21, 2014 10:32 AM


All replies

  • Hi,

    In order to use IndexedDB in your Metro apps based on HTML5 & JavaScript, You need JavaScript Library for Windows (WinJS). It is automatically added to your projects "Reference" Folder when you create a metro app using JavaScript.

    IndexedDB is a browser based Database unlike Relational Databases, Most of us are more familiar with.

    We Create a database using following syntax:-

     var orderDB = window.indexedDB.open("OrdersDB", 1); //Name of the database

                //Create Object Store i.e table in relational database
                orderDB.onupgradeneeded = function (e) {
                    var ordDb = e.target.result;

                    transaction = e.target.result               

                  //Create Table. Here the Name of the Table is 'NewOrderStore' and the key is set to name as 'id'
                    tbl = ordDb.createObjectStore("NewOrderStore", { keyPath: "id"});

                    //The column metadata
                    var columnOptions = { unique: false, multientry: false };

                    //Define the Columns
                    tbl.createIndex("StockiestName1", "StockiestName", columnOptions);
                    tbl.createIndex("OrderDate1", "OrderDate", columnOptions);
                    tbl.createIndex("OrderMedicine1", "OrderMedicine", columnOptions);
                    tbl.createIndex("Quantity1", "Quantity", columnOptions);
                    tbl.createIndex("UnitPrice1", "UnitPrice", columnOptions);
                    tbl.createIndex("TotalPrice1", "TotalPrice", columnOptions);
                    var md = new Windows.UI.Popups.MessageDialog("DB Created");

             // The method to save the data

    function saveOrder() {
                var db = window.indexedDB.open("OrdersDB");
                if (db) {
                    db.onsuccess = function (e) {
                        //S1: Get the Transaction for the ObjectStore, here in this case it is for readwrite
                        var orderStore = e.target.result.transaction("NewOrderStore", "readwrite");
                        //S2: Get the object store object
                        var tbl = orderStore.objectStore("NewOrderStore");
                        //S3: Read values entered in each textbox and also the selected date
                        var id = document.getElementById('txtordno').value;
                        var sockiestName = document.getElementById('txtstockiest').value;
                        var orderDate = selectedDate;
                        var orderMedicine = document.getElementById('txtordermedicine').value;
                        var quantity = document.getElementById('txtqty').value;
                        var unitProce = document.getElementById('txtunitprice').value;
                        var totalPrice = parseInt(document.getElementById('txtunitprice').value) * parseInt(document.getElementById('txtqty').value);

                        //S4: Add the values against each keypath on object store
                        var saveOperation = tbl.add({
                            "id": id,
                            "StockiestName": sockiestName ,
                            "OrderDate":orderDate ,
                            "OrderMedicine": orderMedicine,
                            "Quantity": quantity,
                            "UnitPrice": unitProce,
                            "TotalPrice": totalPrice  
                        saveOperation.onsuccess = function (e) {
                            var res = document.getElementById("txtres");
                            res.value = "Saved" + e.target.result;

                        saveOperation.onerror = function (e) {
                            var res = document.getElementById("txtres");
                            res.value = "Error Occured" + e.value;

                        document.getElementById('txtprice').value = totalPrice;

    Tuesday, January 21, 2014 11:45 AM
  • thank you,

    can you share links where I can crate crud operations using IndexedDB in windows store app....!

    My requirement is to create windows store app using PhoneGap 
    • Edited by rsunilkumar Tuesday, January 21, 2014 11:51 AM
    Tuesday, January 21, 2014 11:50 AM
  • See the IndexedDB sample  in the samples gallery for a Windows Store sample. For PhoneGap you'll need to talk to Cordova, but since IndexedDB is standard HTML5 (not WinJS) it should be essentially the same.
    Tuesday, January 21, 2014 4:09 PM