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 // ------------------------------------------------------