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