Write up to 98% less code with JayData

Author: Peter Aron Zentai March 6th, 2013

Define a database on the device, create its schema, write an item and query data back. This should be as simple a thing as adding two numbers together.

With JayData

With JayData this is almost the case, it is 3 lines.

  $data.define(<span class="str">"Todo"</span>, { Task: String, Completed: Boolean  });
  $data(<span class="str">"Todo"</span>).save({Task:<span class="str">"Step 1"</span>, Completed: <span class="kwrd">false</span> });
  $data(<span class="str">"Todo"</span>).query(<span class="str">"it.Task.contains('Step') &amp;&amp; it.Completed == true"</span>);

$data.define("Todo", { Task: String, Completed: Boolean });

$data("Todo").save({Task:"Step 1", Completed: false });

$data("Todo").query("it.Task.contains('Step') && it.Completed == true");

Without JayData

Without JayData: well over 200 lines. The below code is under further development, some features like query or indexation is just missing. With all those added it will be more then 300 lines for sure. Why writing 300 lines of code when 3 will just do the same?

<span class="kwrd">var</span> myStorage = {};
<span class="kwrd">if</span> (window.openDatabase) {
    <span class="rem">//use WebSQL datasource if it is available</span>
    
    myStorage.open = <span class="kwrd">function</span> () {
        <span class="kwrd">var</span> dbSize = 5 * 1024 * 1024; <span class="rem">// 5MB</span>
        myStorage.db = openDatabase(<span class="str">"Todo"</span>, <span class="str">"1.0"</span>, <span class="str">"Todo manager"</span>, dbSize);
    }
    
    myStorage.createTable = <span class="kwrd">function</span> () {
        <span class="kwrd">var</span> db = myStorage.db;
        db.transaction(<span class="kwrd">function</span> (tx) {
            tx.executeSql(<span class="str">"CREATE TABLE IF NOT EXISTS todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)"</span>, []);
        });
    }
    
    myStorage.init = <span class="kwrd">function</span> () {
        myStorage.open();
        myStorage.createTable();
    }
    
    <span class="rem">//save new item</span>
    myStorage.addTodo = <span class="kwrd">function</span> (todoText) {
        <span class="kwrd">var</span> db = myStorage.db;
        db.transaction(<span class="kwrd">function</span> (tx) {
            <span class="kwrd">var</span> addedOn = <span class="kwrd">new</span> Date();
            tx.executeSql(<span class="str">"INSERT INTO todo(todo, added_on) VALUES (?,?)"</span>,
                          [todoText, addedOn],
                          myStorage.onSuccess,
                          myStorage.onError);
        });
    }
    
    myStorage.onError = <span class="kwrd">function</span> (tx, e) {
        alert(<span class="str">"There has been an error: "</span> + e.message);
    }
    
    myStorage.onSuccess = <span class="kwrd">function</span> (tx, r) {
        <span class="rem">//re-render the data.</span>
        myStorage.getAllTodoItems(loadTodoItems);
    }
    
    <span class="rem">//Read all records from DB</span>
    myStorage.getAllTodoItems = <span class="kwrd">function</span> () {
        <span class="kwrd">var</span> db = myStorage.db;
        db.transaction(<span class="kwrd">function</span> (tx) {
            tx.executeSql(<span class="str">"SELECT * FROM todo"</span>, [], loadTodoItems,
                          myStorage.onError);
        });
    }
    
    <span class="rem">//Process the results</span>
    <span class="kwrd">function</span> loadTodoItems(tx, rs) {
        
        <span class="kwrd">for</span> (<span class="kwrd">var</span> i = 0; i &lt; rs.rows.length; i++) {
            console.dir(rs.rows.item(i));
        }
    }
    
    console.log(<span class="str">"webSQL"</span>);
    
}
<span class="kwrd">else</span> {
    <span class="rem">//Use IndexedDB if WebSQL isn't available</span>
    
    console.log(<span class="str">"indexeddb"</span>);
    <span class="kwrd">var</span> indexedDB = window.indexedDB || window.webkitIndexedDB ||
        window.mozIndexedDB;
    
    <span class="kwrd">if</span> (<span class="str">'webkitIndexedDB'</span> <span class="kwrd">in</span> window) {
        window.IDBTransaction = window.webkitIDBTransaction;
        window.IDBKeyRange = window.webkitIDBKeyRange;
    }
    
    <span class="kwrd">var</span> currentDateTime = <span class="kwrd">new</span> Date();
    
    myStorage = {};
    myStorage.db = <span class="kwrd">null</span>;
    
    myStorage.onerror = <span class="kwrd">function</span> (e) {
        console.log(e);
    };
    <span class="kwrd">var</span> v = 1;
    
    myStorage.IDBTransactionModes = { <span class="str">"READ_ONLY"</span>: <span class="str">"readonly"</span>, <span class="str">"READ_WRITE"</span>: <span class="str">"readwrite"</span>, <span class="str">"VERSION_CHANGE"</span>: <span class="str">"versionchange"</span> };
    
    myStorage.init = <span class="kwrd">function</span> () {
        
        <span class="kwrd">var</span> request = indexedDB.open(<span class="str">"todos"</span>, v);
        
        request.onupgradeneeded = <span class="kwrd">function</span> (e) {
            myStorage.db = e.target.result;
            <span class="kwrd">var</span> db = myStorage.db;
            <span class="rem">// We can only create Object stores in a setVersion transaction;</span>
            
            <span class="kwrd">if</span> (db.objectStoreNames.contains(<span class="str">"todo"</span>)) {
                <span class="kwrd">var</span> storeReq = db.deleteObjectStore(<span class="str">"todo"</span>);
            }
            
            <span class="kwrd">var</span> store = db.createObjectStore(<span class="str">"todo"</span>,
                                             { keyPath: <span class="str">"timeStamp"</span> });
            
        }
        
        request.onsuccess = <span class="kwrd">function</span> (e) {
            myStorage.db = e.target.result;
            <span class="kwrd">var</span> db = myStorage.db;
            
            <span class="kwrd">if</span> (v != db.version &amp;&amp; db.setVersion) {
                <span class="kwrd">var</span> setVrequest = db.setVersion(v);
                
                <span class="rem">// onsuccess is the only place we can create Object Stores</span>
                setVrequest.onerror = myStorage.onerror;
                setVrequest.onsuccess = <span class="kwrd">function</span> (e) {
                    <span class="kwrd">if</span> (db.objectStoreNames.contains(<span class="str">"todo"</span>)) {
                        db.deleteObjectStore(<span class="str">"todo"</span>);
                    }
                    
                    <span class="kwrd">var</span> store = db.createObjectStore(<span class="str">"todo"</span>,
                                                     { keyPath: <span class="str">"timeStamp"</span> });
                    db.close();
                    myStorage.getAllTodoItems();
                };
            }
            <span class="kwrd">else</span>
                myStorage.getAllTodoItems();
        };
        
        request.onerror = myStorage.onerror;
    }
    
    <span class="rem">//Save new object to the database</span>
    myStorage.addTodo = <span class="kwrd">function</span> (todoText) {
        <span class="kwrd">var</span> request = indexedDB.open(<span class="str">"todos"</span>, v);
        request.onsuccess = <span class="kwrd">function</span> (e) {
            myStorage.db = e.target.result;
            <span class="kwrd">var</span> db = myStorage.db;
            <span class="kwrd">var</span> trans = db.transaction([<span class="str">"todo"</span>], myStorage.IDBTransactionModes.READ_WRITE);
            <span class="kwrd">var</span> store = trans.objectStore(<span class="str">"todo"</span>);
            
            <span class="kwrd">var</span> data = {
                <span class="str">"text"</span>: todoText,
                <span class="str">"details"</span>: currentDateTime.getTime(),
                <span class="str">"dateCreated"</span>: currentDateTime.toUTCString(currentDateTime.getTime()),
                <span class="str">"timeStamp"</span>: <span class="kwrd">new</span> Date().getTime()
            };
            
            <span class="kwrd">var</span> request = store.put(data);
            
            request.onsuccess = <span class="kwrd">function</span> (e) {
                db.close();
                myStorage.getAllTodoItems();
            };
            
            request.onerror = <span class="kwrd">function</span> (e) {
                console.log(<span class="str">"Error Adding: "</span>, e);
            };
        };
        request.onerror = myStorage.onerror;
    };
    
    myStorage.getAllTodoItems = <span class="kwrd">function</span> () {
        <span class="kwrd">var</span> request = indexedDB.open(<span class="str">"todos"</span>, v);
        request.onsuccess = <span class="kwrd">function</span> (e) {
            myStorage.db = e.target.result;
            
            <span class="kwrd">var</span> db = myStorage.db;
            db.onversionchange = <span class="kwrd">function</span> (evt) {
                alert(<span class="str">"versionchange"</span>);
            };
            
            <span class="kwrd">var</span> trans = db.transaction([<span class="str">"todo"</span>], myStorage.IDBTransactionModes.READ_WRITE);
            <span class="kwrd">var</span> store = trans.objectStore(<span class="str">"todo"</span>);
            
            <span class="rem">// Get everything in the store;</span>
            <span class="kwrd">var</span> keyRange = IDBKeyRange.lowerBound(0);
            <span class="kwrd">var</span> cursorRequest = store.openCursor(keyRange);
            
            cursorRequest.onsuccess = <span class="kwrd">function</span> (e) {
                <span class="kwrd">var</span> result = e.target.result;
                <span class="kwrd">if</span> (!!result == <span class="kwrd">false</span>) {
                    <span class="kwrd">return</span>;
                }
                console.dir(result.value);
                
                result.<span class="kwrd">continue</span>();
            };
            
            cursorRequest.onerror = myStorage.onerror;
        };
        request.onerror = myStorage.onerror;
    };
    
    console.log(<span class="str">"indexeddb"</span>);
}

<span class="rem">//Initialize the available database</span>
myStorage.init();
myStorage.addTodo(<span class="str">"This is my task"</span>);
myStorage.getAllTodoItems();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

var myStorage = {};

if (window.openDatabase) {

//use WebSQL datasource if it is available

myStorage.open = function () {

var dbSize = 5 * 1024 * 1024; // 5MB

myStorage.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);

}

myStorage.createTable = function () {

var db = myStorage.db;

db.transaction(function (tx) {

tx.executeSql("CREATE TABLE IF NOT EXISTS todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);

});

}

myStorage.init = function () {

myStorage.open();

myStorage.createTable();

}

//save new item

myStorage.addTodo = function (todoText) {

var db = myStorage.db;

db.transaction(function (tx) {

var addedOn = new Date();

tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",

[todoText, addedOn],

myStorage.onSuccess,

myStorage.onError);

});

}

myStorage.onError = function (tx, e) {

alert("There has been an error: " + e.message);

}

myStorage.onSuccess = function (tx, r) {

//re-render the data.

myStorage.getAllTodoItems(loadTodoItems);

}

//Read all records from DB

myStorage.getAllTodoItems = function () {

var db = myStorage.db;

db.transaction(function (tx) {

tx.executeSql("SELECT * FROM todo", [], loadTodoItems,

myStorage.onError);

});

}

//Process the results

function loadTodoItems(tx, rs) {

for (var i = 0; i < rs.rows.length; i++) {

console.dir(rs.rows.item(i));

}

console.log("webSQL");

}

else {

//Use IndexedDB if WebSQL isn't available

console.log("indexeddb");

var indexedDB = window.indexedDB || window.webkitIndexedDB ||

window.mozIndexedDB;

if ('webkitIndexedDB' in window) {

window.IDBTransaction = window.webkitIDBTransaction;

window.IDBKeyRange = window.webkitIDBKeyRange;

}

var currentDateTime = new Date();

myStorage = {};

myStorage.db = null;

myStorage.onerror = function (e) {

console.log(e);

};

var v = 1;

myStorage.IDBTransactionModes = { "READ_ONLY": "readonly", "READ_WRITE": "readwrite", "VERSION_CHANGE": "versionchange" };

myStorage.init = function () {

var request = indexedDB.open("todos", v);

request.onupgradeneeded = function (e) {

myStorage.db = e.target.result;

var db = myStorage.db;

// We can only create Object stores in a setVersion transaction;

if (db.objectStoreNames.contains("todo")) {

var storeReq = db.deleteObjectStore("todo");

}

var store = db.createObjectStore("todo",

{ keyPath: "timeStamp" });

}

request.onsuccess = function (e) {

myStorage.db = e.target.result;

var db = myStorage.db;

if (v != db.version && db.setVersion) {

var setVrequest = db.setVersion(v);

// onsuccess is the only place we can create Object Stores

setVrequest.onerror = myStorage.onerror;

setVrequest.onsuccess = function (e) {

if (db.objectStoreNames.contains("todo")) {

db.deleteObjectStore("todo");

}

var store = db.createObjectStore("todo",

{ keyPath: "timeStamp" });

db.close();

myStorage.getAllTodoItems();

};

}

else

myStorage.getAllTodoItems();

};

request.onerror = myStorage.onerror;

}

//Save new object to the database

myStorage.addTodo = function (todoText) {

var request = indexedDB.open("todos", v);

request.onsuccess = function (e) {

myStorage.db = e.target.result;

var db = myStorage.db;

var trans = db.transaction(["todo"], myStorage.IDBTransactionModes.READ_WRITE);

var store = trans.objectStore("todo");

var data = {

"text": todoText,

"details": currentDateTime.getTime(),

"dateCreated": currentDateTime.toUTCString(currentDateTime.getTime()),

"timeStamp": new Date().getTime()

};

var request = store.put(data);

request.onsuccess = function (e) {

db.close();

myStorage.getAllTodoItems();

};

request.onerror = function (e) {

console.log("Error Adding: ", e);

};

request.onerror = myStorage.onerror;

};

myStorage.getAllTodoItems = function () {

var request = indexedDB.open("todos", v);

request.onsuccess = function (e) {

myStorage.db = e.target.result;

var db = myStorage.db;

db.onversionchange = function (evt) {

alert("versionchange");

};

var trans = db.transaction(["todo"], myStorage.IDBTransactionModes.READ_WRITE);

var store = trans.objectStore("todo");

// Get everything in the store;

var keyRange = IDBKeyRange.lowerBound(0);

var cursorRequest = store.openCursor(keyRange);

cursorRequest.onsuccess = function (e) {

var result = e.target.result;

if (!!result == false) {

return;

}

console.dir(result.value);

result.continue();

};

cursorRequest.onerror = myStorage.onerror;

};

request.onerror = myStorage.onerror;

};

console.log("indexeddb");

}

//Initialize the available database

myStorage.init();

myStorage.addTodo("This is my task");

myStorage.getAllTodoItems();

JayData.org