IndexedDB EZ is a js wrapper for IndexedDB providing rapid client-side development of IndexedDB databases with the possibility of easy data synchronization hooks.
Version2 adds hooks for a new new javascript library called ixDbEzSync. This library is not publically available just yet. For now, when you create a ixDbEz database,
just set the useIxDbSync variable to false, and this functionality will be ignored.
All examples are written using Version 2 of ixDbEz.
This code can be added to the window.onload event.
//Define the local IndexedDB structure in a function
//This code ONLY executes anytime:
// 1. The database does not exist.
// 2. The version number passed to StartDB is greater than the
// current version number.
// 3 The version number passed to StartDB is not a valid integer.
var ixdbDDL = (
function () {
//Create IndexedDB ObjectStore and Indexes via ixDbEz
ixDbEz.createObjStore("demoOS", "keyField", false);
ixDbEz.createIndex("demoOS", "ixField1", "Field1", true);
}
);
//Create or Open the local IndexedDB database via ixDbEz
ixDbConnection = ixDbEz.startDB("demoDb", 2, ixdbDDL, undefined, undefined, true);
//define new record with users input
var newRecord = {};
newRecord.keyField = "1";
newRecord.Field1 = "This is";
newRecord.Field2 = "a";
newRecord.Field3 = "test";
//add new record to the local database
ixDbEz.add("demoOS", newRecord);
ixDbEz.put('demoOS', JSON.parse("{ "keyField":"1" , "Field1" : "This is" , "Field2" : "an update" , "Field3" : "test" }");
ixDbEz.delete('demoOS','1');
//Create a callback function that runs when / if the cursor comes back.
//ixDbCursorReq is the cursor request object passed back from the getCursor request.
//Use ixDbCursorReq.onsuccess event to trigger any logic you need to run against the data that
//comes back in the cursor.
function myDeleteRecordCallback(ixDbCursorReq) {
if (typeof ixDbCursorReq === "undefined") {
//we have no cursor returned in the provided value for ixDbCursorReq.
}
else {
ixDbCursorReq.onsuccess = function (e) {
var cursor = ixDbCursorReq.result || e.result;
if (cursor) {
cursor.delete();
}
};
}
}
//The key range can be used to target 1 record or a range of records in your cursor query
var keyRangeObj = IDBKeyRange.only("This is");
//Notice I have used the "true" in the "readWrite" argument of getCursor to make sure we have
//write access on the table for the delete.
ixDbEz.getCursor("ixDbSync", myDeleteRecordCallback, undefined, keyRangeObj, true, "ixField1");
Add a new record to the database table and then rebuild a div based on it's contents using ixDbEz.getCursor()
//define new record with users input
var newRecord = {};
newRecord.keyField = "1";
newRecord.Field1 = "This is";
newRecord.Field2 = "a";
newRecord.Field3 = "test";
//add new record to the local database
ixDbEz.add("demoOS", newRecord , function() { ixDbEz.getCursor("demoOS",getIxDbRecords); });
//1. This function assumes you have a div on your webpage with id="clientRecords"
//2. When the a new record is added to the table (like above), you clear out the div and
// rebuild it to display the new data.
function getIxDbRecords(ixDbCursorReq) {
var html = [];
var clientRecords = document.getElementById('clientRecords');
//Clear out any old content
clientRecords.innerHTML = "";
if(typeof ixDbCursorReq === "undefined"){
clientRecords.innerHTML = '<table id="clientDb-Results"><tr border="1"><th>Key</th><th>Value (JSON)</th><th></th></tr></table>';
clientRecords.style.visibility = "visible";
}
else{
//Also fires once each time cursor.continue() is called.
ixDbCursorReq.onsuccess = function (e) {
var cursor = ixDbCursorReq.result || e.result; // FF4 requires e.result.
if (cursor) {
var cursorObjString = JSON.stringify(cursor.value);
html.push('<tr> ',
'<td>', '<span class="dataValue" contenteditable onblur="ixDbEz.updateKey(\'demoOS\',\'' ,cursor.key ,'\', this.textContent, call_getIxDbRecords )">',cursor.key,'</span> </td>',
'<td class="dataCell" >', '<span class="dataValue" contenteditable onblur="ixDbEz.put(\'demoOS\', JSON.parse(this.textContent), undefined, call_getIxDbRecords )"> ', cursorObjString, ' </span> </td>',
'<td>', '<a href="javascript:void(0)" onclick="ixDbEz.delete(\'demoOS\',\'' , cursor.key ,'\', call_getIxDbRecords )">[Delete]</a>','</td>',
'</tr>');
cursor.continue();
}
else
{
clientRecords.innerHTML = '<table id="clientDb-Results"><tr border="1"><th>Key</th><th>Value (JSON)</th><th></th></tr>' +
html.join('') +
'</table>';
clientRecords.style.visibility = "visible";
}
}
ixDbCursorReq.onerror = function (e) {
//Do some error handling stuff here, if you want to...
}
}
return false;
}