IndexedDB demo showcase

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 &ndash; 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

// ------------------------------------------------------

http://www.huxiu.com/article/21008/1.html