var dbGlobals = new Object();
dbGlobals.db = null;
dbGlobals.description = "This database is used to store files locally.";
dbGlobals.name = "localFileStorage";
dbGlobals.version = 1;
dbGlobals.storeName = "fileObjects";
dbGlobals.message = "";
dbGlobals.empty = true;
// ---------------------------------------------------
function requiredFeaturesSupported() {
switch(window.location.protocol) {
case "http:":
break;
case "https:":
break;
case "ms-wwa-web":
break;
case "ms-wwa":
break;
default:
document.getElementById("bodyElement").innerHTML = "<h3>IndexedDB pages must be served via the http:// or https:// protocol - resolve this issue and try again.</h3>";
return false;
} // switch
if(!document.getElementById("fileSelector").files) {
document.getElementById("bodyElement").innerHTML = "<h3>File API is not fully supported - upgrade your browser to the latest version.</h3>";
return false;
}
if(!window.indexedDB) {
if(window.mozIndexedDB) {
window.indexedDB = widnow.mozIndexedDB;
}
else if(window.webkitIndexedDB) {
window.indexedDB = window.webkitIndexedDB;
IDBCursor = window.webkitIDBCursor;
IDBDatabaseException = window.webkitIDBDatabaseException;
IDBRequest = window.webkitIDBRequest;
IDBKeyRange = window.webkitIDBKeyRange;
IDBTransaction = window.webkitIDBTransaction;
}
else {
document.getElementById("bodyElement").innerHTML = "<h3>IndexedDB is not supported - upgrade your browser to the latest version.</h3>";
return false;
}
} // if
if(!window.indexedDB.deleteDatabase) {
document.getElementById("bodyElement").innerHTML = "<h3>The required version of IndexedDB is not supported.</h3>";
return false;
}
return true;
} // requiredFeaturesSupported
// --------------------------------------------------
if(requiredFeaturesSupported()) {
document.getElementById("openButton").addEventListener("click", openDB, false);
document.getElementById("populateButton").addEventListener("click", populateDB, false);
document.getElementById("displayButton").addEventListener("click", displayDB, false);
document.getElementById("deleteButton").addEventListener("click", deleteDB, false);
document.getElementById("fileSelector").addEventListener("change", handleFileSelection, false);
} // if
// -----------------------------------------
function openDB() {
console.log("------------------------openDB_onupgradeneeded()-----------------------");
displayMessage("<p>The database will be created/opened here...</p>");
if(!window.indexedDB.open) {
console.log("window.indexedDB.open is null in openDB()");
return;
} // if
try {
var openRequest = window.indexedDB.open(dbGlobals.name, dbGlobals.version); //
openRequest.onerror = function(evt) {console.log("openRequest.onerror fired in openDB() - error: " + (evt.target.error ? evt.target.error : evt.target.errorCode));};
openRequest.onblocked = openDB_onblocked;
openRequest.onupgradeneeded = openDB_onupgradeneeded;
openRequest.onsuccess = openDB_onsuccess;
}catch(ex) {
console.log("window.indexedDB.open exception in openDB() - " + ex.message);
}
} // openDB
// --------------------------------------------------------------
function openDB_onblocked(evt) {
console.log("openDB_onblocked()");
var message = "<p>The database is blocked - error code: " + (evt.target.error ? evt.target.error : evt.target.errorCode) + "</p>";
message += "<p>If this page is open in other browser windows, close these windows.</p>";
displayMessage(message);
} // openDB_onblocked
// --------------------------------------------
function openDB_onupgradeneeded(evt) {
console.log("openDB_onupgradeneeded()");
displayMessage("<p>Your request has been queued.</p>");
var db = dbGlobals.db = evt.currentTarget.result; // A successfully opened database results in a database object, which we place in our global IndexedDB variable.
if(!db) {
console.log("db (i.e., evt.target.result) is null in openDB_onupgradeneeded()");
return;
} // if
try {
db.createObjectStore(dbGlobals.storeName, {keyPath: "name"});
console.log("openDB_onupgradedneeded() success");
}
catch(ex) {
console.log("Exception is openDB_onupgradeneeded() - " + ex.message);
return;
}
dbGlobals.message = "<p>The database has been created.</p>"; // A means of communicating this information to the openDB_onsuccess handler.
} // openDB_onupgradeneeded
// -------------------------------------------------
function openDB_onsuccess(evt) {
console.log("openDB_onsuccess()");
displayMessage("<p>Your request has been queued.</p>");
var db = dbGlobals.db = evt.target.result;
if(!db) {
console.log("db (i.e., evt.target.result) is null in openDB_onsuccess()");
return;
} // if
dbGlobals.message += "<p>The database has been opened.</p>";
displayMessage(dbGlobals.message);
dbGlobals.message = "";
} // openDB_onsuccess
// ----------------------------------------------
function populateDB() {
console.log("------------------------populateDB()--------------------------");
if(!dbGlobals.db) {
displayMessage("<p>The database hasn't been opened/created yet.</p>");
console.log("db (i.e., dbGlobals.db) is null in populateDB()");
return;
}
document.getElementById("fileSelector").style.display = "block"; // Now that we have a valid database, allow the user to put file(s) in it.
var message = "<p>Using the below <strong>Browse</strong> button, select one or more files to store in the database.</p>";
message += "<p>Then, click the <strong>Display DB<strong> button to display what's currently in the database.</p>";
displayMessage(message);
} // populateDB
// -------------------------------------------------
function displayDB() {
console.log("------------------------displayDB()----------------------------");
var db = dbGlobals.db;
if(!db) {
displayMessage("<p>There's no database to display.</p>");
console.log("db (i.e, dbGlobals.db) is null in displayDB()");
return;
} // if
try{
var transaction = db.transaction(dbGlobals.storeName, (IDBTransaction.READ_ONLY ? IDBTransaction.READ_ONLY : "readonly"));
} // try
catch(ex) {
console.log("db.transaction() exception in displayDB() - " + ex.messsage);
return;
} // catch
try{
var objectStore = transaction.objectStore(dbGlobals.storeName);
try {
var cursorRequest = objectStore.openCursor();
cursorRequest.onerror = function(evt) {
console.log("cursorRequest.onerror fired in displayDB() - error code: " + (evt.target.error ? evt.target.error : evt.target.errorCode));
}
var fileListHTML = "<p><strong>File(s) in database: </strong></p><ul style='margin: -0.5em 0 1em -1em;'>"; // Be aware that if the database is empty, this variable never gets used.
cursorRequest.onsuccess = function(evt) {
console.log("cursorRequest.onsuccess fired in displayDB()");
var cursor = evt.target.result;
if(cursor) {
dbGlobals.empty = false;
fileListHTML += "<li>" + cursor.value.name;
fileListHTML += "<p style='margin: 0 0 0 0.75em;'>" + cursor.value.name + "</p>";
fileListHTML += "<p style='margin: 0 0 0 0.75em;'>" + cursor.value.size + " bytes</p>";
cursor.continue();
}
else {
fileListHTML += "</ul>";
displayMessage(fileListHTML);
}
if(dbGlobals.empty) {
displayMessage("<p>The database is empty – there's nothing to display.</p>");
}
}
} // inner try
catch(innerException) {
console.log("Inner try exception in displayDB() - " + innerException.message);
} // inner catch
} // outer try
catch(outerException) {
console.log("Outer try exception in displayDB() - " + outerException.message);
} // outer catch
} // displayDB
// -------------------------------------------------
function deleteDB() {
console.log("------------------------deleteDB()-----------------------------");
displayMessage("<p>The database will be deleted here...</p>");
try{
if(dbGlobals.db) {
dbGlobals.db.close(); // If the database is open, you must first close the database connection before deleting it. Otherwise, the delete request waits (possibly forever) for the required close request to occur.
}
var deleteRequest = window.indexedDB.deleteDatabase(dbGlobals.name); // Note that we already checked for the availability of the deleteDatabase() method in the above feature detection code.
deleteRequest.onsuccess = function() {
dbGlobals.db = null;
dbGlobals.empty = true;
dbGlobals.message = "";
displayMessage("<p>The database has been deleted.</p>");
console.log("delete success");
}; // deleteRequest.onsuccess
} // try
catch(ex) {
console.log("Exception in deleteDB() - " + ex.message);
} // catch
} // deleteDB
// -------------------------------------------------
function handleFileSelection(evt) {
console.log("------------------------handleFileSelection()------------------------");
var files = evt.target.files; // The files selected by the uer (as a FileList object).
console.log(files);
if(!files) {
displayMessage("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");
return;
}
var db = dbGlobals.db;
if(!db) {
console.log("db (i.e., dbGlobals.db) is null in handleFileSelection()");
return;
} // if
try{
var transaction = db.transaction(dbGlobals.storeName, (IDBTransaction.READ_WRITE ? IDBTransaction.READ_WRITE : "readwrite"));
} // try
catch(ex) {
console.log("db.transaction exception in handleFileTransaction() - " + ex.message);
return;
} // catch
transaction.onerror = function(evt) {
console.log("transaction.onerror fired in handleFileSelection() - error code: " + (evt.target.error ? evt.target.error : evt.target.errorCode));
};
transaction.onabort = function() {
console.log("transaction.onabort fired in handleFileSelection()");
};
transaction.oncomplete = function() {
console.log("transaction.oncomplete fired in handleFileSelection()");
};
files = [
{
name: "sina.jpg",
size: 2813,
type: "text/html"
},
{
name: "indexedDB.html",
size: 808,
type: "text/html"
},
{
name: "m.html",
size: 0,
type: "text/html"
}
];
try {
var objectStore = transaction.objectStore(dbGlobals.storeName);
for(var i = 0, file; file = files[i]; i++) {
var putRequest = objectStore.put(file);
putRequest.onsuccess = function() {dbGlobals.empty = false;};
putRequest.onerror = function(evt) {console.log("putRequest.onerror fired in handleFileSelection() - error code: " + (evt.target.error ? evt.target.error : evt.target.errorCode));};
} // for
} // try
catch(ex) {
console.log("Transaction and/or put() exception in handleFileSelection() - " + ex.message);
return;
} // catch
document.getElementById("fileSelector").style.display = "none"; // The file(s) have already been selected so remove the "file picker" dialog box.
} // handleFileSelection
// --------------------------------------------------
function displayMessage(message) {
document.getElementById("messages").innerHTML = message;
} // displayMessage
// ------------------------------------------------------
