API Indexed Database is the officially supported by W3C way for the creation of databases with HTML5
This system takes the concept of key/value pairs to store data. the Database can contain Stores, the equivalent to the SQL tables, and each Object Store contains key/value pairs; this API is not a relational database, but object oriented. you can query this database inline as offline
The first step in this example will be creating a new database, for this we use the open() method, the syntax is as follows:
In this example we build the next web form, and implement a Web Method in the server side which returns an array of json objects for loading the database
The js code to open the database and create the object store is the next
The code to add and delete records is the next:
Since the id has been declared autoIncrement, we are inserting a record initializing two fields in the value property (value, and timeStamp)
The next is the code to retrieve and render records from the database:
Here is the result of this code in the client side:
Finally we have implemented this call to the server to retrieve a collection of json objects and preload the database:
<METHOD SOFTWARE © 2014>
This system takes the concept of key/value pairs to store data. the Database can contain Stores, the equivalent to the SQL tables, and each Object Store contains key/value pairs; this API is not a relational database, but object oriented. you can query this database inline as offline
The first step in this example will be creating a new database, for this we use the open() method, the syntax is as follows:
indexedDB.open("database_name", version)
In this example we build the next web form, and implement a Web Method in the server side which returns an array of json objects for loading the database
The js code to open the database and create the object store is the next
var HTML5DB = {};
HTML5DB.indexedDB = {};
HTML5DB.indexedDB.db = null;
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;
HTML5DB.indexedDB.onerror = function (e) { console.log(e); };
HTML5DB.indexedDB.open = function () {
var version = 1;
var request = window.indexedDB.open("db_example", version);
request.onupgradeneeded = function (e) {
var db = e.target.result;
e.target.transaction.onerror = HTML5DB.indexedDB.onerror;
var store = db.createObjectStore("object_store",
{ keyPath: "id", autoIncrement: true });
};
request.onsuccess = function (e) {
HTML5DB.indexedDB.db = e.target.result;
HTML5DB.indexedDB.getAllRecords();
};
request.onerror = HTML5DB.indexedDB.onerror;
};
The code to add and delete records is the next:
Since the id has been declared autoIncrement, we are inserting a record initializing two fields in the value property (value, and timeStamp)
HTML5DB.indexedDB.addRecord = function (value) {
var db = HTML5DB.indexedDB.db;
var trans = db.transaction(["object_store"], "readwrite");
var store = trans.objectStore("object_store");
var data = {
"value": value,
"timeStamp": new Date($.now()).toLocaleTimeString()
};
var request = store.put(data);
request.onsuccess = function (e) {
HTML5DB.indexedDB.getAllRecords();
};
request.onerror = function (e) {
console.log("Error Adding: ", e);
};
};
HTML5DB.indexedDB.deleteRecord = function(id) {
var db = HTML5DB.indexedDB.db;
var trans = db.transaction(["object_store"], "readwrite");
var store = trans.objectStore("object_store");
var request = store.delete(id);
request.onsuccess = function(e) {
HTML5DB.indexedDB.getAllRecords();
};
request.onerror = function(e) {
console.log("Error deleting: ", e);
};
};
The next is the code to retrieve and render records from the database:
HTML5DB.indexedDB.getAllRecords = function() {
$('#dbRecords tr').remove();
var db = HTML5DB.indexedDB.db;
var trans = db.transaction(["object_store"], "readwrite");
var store = trans.objectStore("object_store");
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;
renderRecord(result.value);
result.continue();
};
cursorRequest.onerror = HTML5DB.indexedDB.onerror;
};
function renderRecord(record) {
$("#dbRecords").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<span>')
.html(record.value)
)
)
.append($('<td>')
.append($('<span>')
.html(record.timeStamp)
)
)
.append($('<td>')
.append($('<a>')
.attr('href',
'javascript:HTML5DB.indexedDB.deleteRecord(' + record.id + ')')
.html('Delete')
)
));
}
Here is the result of this code in the client side:
Finally we have implemented this call to the server to retrieve a collection of json objects and preload the database:
function getData() {
$.ajax({
url: "application.aspx/getData",
type: "POST",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (json) {
var records = json.d.Data.records;
for (var i = 0; i < records.length; i++) {
HTML5DB.indexedDB.addRecord(records[i].Data.value);
}
},
error: function (e) {
alert('ERROR: ' + e.status + ' : ' + e.statusText);
}
});
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static JsonResult getData()
{
List<JsonResult> recordSet = new List<JsonResult>();
for (int i = 0; i < 10; i++)
{
Record rec = new Record();
rec.value = "record " + i.ToString();
recordSet.Add(new JsonResult() { Data = rec });
}
JsonResult result = new JsonResult();
result.Data = new Result() { records = recordSet };
return result;
}
private class Result
{
public List<JsonResult> records;
}
private class Record
{
public string value;
}
<METHOD SOFTWARE © 2014>
