Introducing StorageIO.JS - Cross Browser API for HTML5 Client Side Storage

http://zmhassan.github.io/StorageIO.js/

Idea: 

This was a result of thinking about our last lecture in OSD600. We want a cross browser way of storing and retrieving data in HTML5 Storage technologies like IndexedDB or Web SQL. Since we know that using IndexedDB is the preferred method of storing data in HTML5 in the client browser and secure features of same-origin policy, we will use Web SQL as a fallback solution to browser that doesn't support IndexedDB.

Proposal: 

I think we could create a library that first detects if your browser supports indexedDB. If it does then it will provide you with an object that helps you quickly process your data. I would like to also consider using Web Workers in the asynchronous IndexedDB API to provide performance that will enable quick data access and allow for syncing data to the server in parallel.

Design:

IndexedDB gives us more feature rich experience, so we check for that first and return an object that will do everything from: Create, Update, Delete, Drop, etc. I'm still working on this, StorageIO.js may not have all the functionality I want but I will add it very soon. I want this code to be multithreaded so I will be implementing Web Workers. I will use native XHR ajax to achieve posting to the server for syncing data.

Where does the code live:

It lives in Git. Feel free to git clone and send your pull request. The web as we know it would not be what it is today without the collaboration of individuals that contributed code to open source community.

http://zmhassan.github.io/StorageIO.js/

Prototype/ Mockup:

/* @Author: Zakeria Hassan 
 * @Date: Nov. 6, 2013
 * @License: MIT
 * @Purpose:
 * Generally StorageIO uses IndexedDB http://www.w3.org/TR/IndexedDB/.  
 * If IndexedDB isn't isn't supported then it use as an alternative 
 * WebSQL http://www.w3.org/TR/webdatabase/.
 * 
 * The MIT License (MIT)
 * Copyright (c) 2013 Zakeria Hassan
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 */

"use strict";

(function (global) {

  var StorageIO = function (_dbname) {
      if (global.indexedDB || global.mozIndexedDB || global.webkitIndexedDB || global.msIndexedDB) {
        return {
          indexedDB: global.indexedDB || global.mozIndexedDB || global.webkitIndexedDB || global.msIndexedDB,
          IDBTransaction: global.IDBTransaction || global.webkitIDBTransaction || global.msIDBTransaction,
          IDBKeyRange: global.IDBKeyRange || global.webkitIDBKeyRange || global.msIDBKeyRange,
          req: null,
          result: null,
          dbName: _dbname || "test",
          error: function (event) {
            // Should do some error handling
            // TODO: This code is not complete.. Will finish soon
            console.log("request failed!");
          },
          success: function (event) {
            this.result = this.req.result;
          },
          read: function () {
            //TODO:This code is not complete.. Will finish soon
          },
          rm: function () {
            //TODO:This code is not complete.. Will finish soon
          },
          open: function () {
            this.req = this.indexedDB.open(this.dbname);
            this.req.onerror = this.error;
            this.req.success = this.success;
            return this;
          },
          /**
           * @param {Object} has three keys and looks like this: { "key":string, value":string, "isUnique":bool}
           */
          write: function (obj) {
            //TODO: Must be able to write key value pairs to the indexedDB.
            //TODO: This code is not complete.. Will finish soon
            this.req.onupgradeneeded = function (event) {
              var st = event.currentTarget.result.createObjectStore(this.dbname, {
                keypath: 'id',
                autoIncrement: true
              });
              //Creating Columns
              for (var i = 0; i < obj.length; i++) {
                st.createIndex(obj[i]["key"], obj[i]["value"], {
                  unique: obj[i]["isUnique"]
                });
              }
            }
          },
          close: function () {};
        };
      } else {
        /*
         * As a fallback solution to acheive cross browser compatibility 
         * I've included a Web SQL Backed solution.
         * TODO:This code is not complete.. Will finish soon
         */
        return {
          read: function () {},
          write: function () {},
          rm: function () {}
        }
      }

    };


  global.StorageIO = StorageIO;
})(this);