Answered by:
Indexed DB examples (PhoneGap (OR) HTML5 , Javascript )

Question
-
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
Answers
-
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.
- Marked as answer by Anne Jing Tuesday, January 28, 2014 1:59 AM
Tuesday, January 21, 2014 4:09 PMModerator
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");
md.showAsync();// 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;
};
}
}- Edited by Vishwajeet (MCA,MCP,MCTS,MCITP) Tuesday, January 21, 2014 11:47 AM Add Indentation
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.
- Marked as answer by Anne Jing Tuesday, January 28, 2014 1:59 AM
Tuesday, January 21, 2014 4:09 PMModerator