Here is Example for IndexedDB for Insert/View
JS For IndexedDB.js
var dbData;
var IndexedDB = window.window.indexedDB ||
window.webkitIndexedDB ||
window.mozIndexedDB;
window.mozIndexedDB;
var IDBTransactionModes = { "READ_ONLY": "readonly",
"READ_WRITE": "readwrite",
"VERSION_CHANGE": "versionchange" };
"VERSION_CHANGE": "versionchange" };
var v = 1;
var ID = 0;
function Create() {
var request
= IndexedDB.open("TestDB", v);
// Object
Store only created on version change. and
this event will
fire on version change.
request.onupgradeneeded = function (e) {
var db
= e.target.result;
if
(db.objectStoreNames.contains("tblperson"))
{
var
storeReq = db.deleteObjectStore("tblperson");
}
var
store1 = db.createObjectStore("tblperson",
{ keyPath: "ID" });
}
request.onsuccess = function (e) {
var db
= e.target.result;
if (v
!= db.version && db.setVersion) {
var
setVrequest = db.setVersion(v);
setVrequest.onsuccess = function (e) {
debugger;
if
(db.objectStoresName.contains("tblperson"))
{
var
storeV = db.createObjectStore("tblperson",
{ keyPath: "ID" });
}
db.createObjectStore("tblperson", { keyPath: "ID" });
db.close();
}
}
else {
}
setVrequest.onerror = function (e) { alert("Error
in Set version: " + e); }
}
request.onerror = function
(e) {
debugger;
var db
= e.target.result;
}
}
IndexedDB.onerror
= function (e) {
alert(e)
};
function DeleteDB() {
var
deleteRequest = IndexedDB.deleteDatabase("TestDB");
deleteRequest.onsuccess = function (e) {
alert("DB
Deleted SuccessFully");
}
deleteRequest.onblocked = function (e) {
alert("blocked");
}
deleteRequest.onerror = function (e) { alert("Error
in Dekete Database: " + e); }
}
function AddRecord(Name, Desc, City) {
var request
= IndexedDB.open("TestDB", v);
request.onsuccess = function (e) {
var db
= e.target.result;
var trans = db.transaction(["tblperson"],
IDBTransactionModes.READ_WRITE);
var
store = trans.objectStore("tblperson");
ID++;
var
data = {
"ID":
ID,
"Name":
Name,
"Desc":
Desc,
"City":
City
};
var
insert = store.put(data);
insert.onsuccess = function (e) {
//
alert("data Inserted Successfully");
db.close();
ViewRecord();
}
insert.onerror = function (e) {
debugger;
alert("Error
while inserting data, " + e);
}
}
request.onerror = function
(e) {
debugger;
}
}
function ViewRecord() {
var request
= IndexedDB.open("TestDB", v);
request.onsuccess = function (e) {
var db
= e.target.result;
var
Data = new Array();
db.onversionchange = function (evt) {
alert("versionchange");
};
var
trans = db.transaction(["tblperson"],
IDBTransactionModes.READ_ONLY);
var
store = trans.objectStore("tblperson");
var
keyRange = IDBKeyRange.lowerBound(0);
var
cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function (e) {
var
result = e.target.result;
if
(!!result == false) {
return;
}
//debugger;
Data.push(result.value);
result.continue();
};
viewDataGrid(Data);
cursorRequest.onerror = function () {
debugger;
}
};
request.onerror = function
(e) {
debugger;
};
}
// Kendo UI Grid
function viewDataGrid(dbData) {
$("#dvData").kendoGrid({
dataSource: {
data: dbData
},
selectable: true,
resizable: true,
reorderable: true,
height: 400,
columns: [{ field: "ID", width: "15%",
title: "ID" },
{ field: "Name", width: "30%",
title: "Name" },
{ field: "Desc", width: "25%",
title: "Designation" },
{ field: "City", width: "30%",
title: "City"}]
});
HTML:
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/IndexedDB.js" type="text/javascript"></script>
<script src="Scripts/kendo.web.min.js" type="text/javascript"></script>
<link href="Styles/kendo.default.min.css" rel="stylesheet"
type="text/css"
/>
<link href="Styles/kendo.common.min.css" rel="stylesheet"
type="text/css"
/>
<script type="text/javascript">
$(window).load(Create);
$(document).ready(function () {
$("#btnDeleteDB").click(function () {
DeleteDB();
});
$("#btnView").click(function () {
ViewRecord();
});
$("#btnAdd").click(function () {
AddRecord($("#txtName").val(),
$("#txtDesc").val(), $("#txtCity").val());
});
});
</script>
<div>
<input type="button" id="btnDeleteDB" value="Delete DB" />
</div>
<table>
<tr>
<td align="right">
Name:
</td>
<td>
<input type="text" id="txtName"
/>
</td>
</tr>
<tr>
<td align="right">
Designation
</td>
<td>
<input
type="text"
id="txtDesc"
/>
</td>
</tr>
<tr>
<td align="right">
City
</td>
<td>
<input
type="text"
id="txtCity"
/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input
type="button"
value="Add"
id="btnAdd"
/>
<input
type="button"
value="View"
id="btnView"
/>
</td>
</tr>
</table>
<br />
<br />
<br />
<div id="dvData">
<%--For Kendo Grid--%>
</div>
Here is Link for IndexedDB Supported browser
