1. Web Storage
Dylan Schiemann (@dylans)
SitePen, Inc.
HTML5 Code Camp, October, 2010
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

2. © SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

3. Web Storage Timeline
Cookies
Flash Storage
Dojo Offline/Storage, Google Gears
localStorage and sessionStorage
window[‘name’] hack
WebDatabase and IndexedDB
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

4. WebSQL API
Currently supported by Safari, Chrome, and Opera. Will not
be supported by Mozilla.
SQL, query-based transactions
Asynchronous interactions
Editor’s Draft: http://dev.w3.org/html5/webdatabase/
Will be easy to use for those well-versed in SQL
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

5. WebSQL: Open Connection, Create Table
// Connect to the db
var db = window.openDatabase("MyDB", "", "My database", 1024);
// If the db has not been initialized for this user...
if (db.version != "1") {
// User's first visit. Initialize database.
db.changeVersion(db.version, "1", function(tx) {
// Create "users" table
tx.executeSql("CREATE TABLE users(id INTEGER PRIMARY KEY, name TEXT);");
}, null, function() {
// Success!
console.log('success!');
});
}
else {
// DB already created, move on....
}
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

6. WebSQL: Add Records
// Connect to the db
var db = window.openDatabase("MyDB", "1", "My database", 1024);
// Create a transaction
db.transaction(function(tx) {
// Execute a SQL statement
tx.executeSql("INSERT INTO users (name) VALUES (:name);", // sql
[{ name: 'Dylan'}], // Object (data)
function(tx, results) { // Success!
console.log('Added user. ID: ' + results.insertId,results);
},
function(tx,e) { // Error!
console.log('Error! ',e);
}
);
});
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

7. WebSQL: Retrieve Records
// Connect to the db
var db = window.openDatabase("MyDB", "1", "My database", 1024);
// Create a transaction
db.readTransaction(function(tx) {
// Search for all users
tx.executeSql("SELECT * FROM users", [], function(tx, results) {
// Get result rows
var rows = results.rows;
// For each row
for(x = 0; x < rows.length; x++) {
// Get the user information!
var user = rows.item(x);
console.log('Found user: ' + user.name);
}
});
});
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

8. IndexedDB API
Actively developed by Mozilla
Initial support will begin with Firefox 4 (4b6 has issues)
Currently a working draft with the W3C
Not SQL-based; JavaScript object storage with indexes
Asynchronous interactions
Working Draft: http://www.w3.org/TR/IndexedDB/
Dojo and Persevere implement it
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

9. IndexedDB: Open Connection, Create Table
// Attempt to open a database
var request = window.indexedDB.open("MyDB","My database"); // DB name, description
// Add "success" handling
request.onsuccess = function(event) {
// Check to see if the database has been created
if(event.result.version != "1") { // not created
// Create users table (table name, key, autoincrement?)
var tableRequest = db.createObjectStore("users","id",true);
// Success!
tableRequest.onsuccess = function() {
// Save as created!
db.setVersion("1");
};
}
};
// Account for errors
request.onerror = function(event) {
//handle the error
};
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

10. IndexedDB: Create a Store with Data
// Attempt to open a database
var request = window.indexedDB.open("MyDB","My database"); // DB name, description
// Add "success" handling
request.onsuccess = function(event) {
// Grab a store
var objectStore = event.result.objectStore("users");
// Add a record
objectStore.add({ name: "Dylan", role:"CEO" }).onsuccess(function(){
// Success!
console.log("Record saved!");
});
// Add another record
objectStore.add({ name: "David", role:"Engineer" }).onsuccess(function(){
// Success!
console.log("Second record saved!");
});
};
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

11. IndexedDB: Retrieve All Data
// Attempt to open a database
var request = window.indexedDB.open("MyDB","My database"); // DB name, description
// Add "success" handling
request.onsuccess = function(event) {
// Open a cursor on the users store
cursorRequest = event.result.objectStore("users").openCursor();
// If successful...
cursorRequest.onsuccess = function(e) {
// Grab the cursor
var cursor = e.cursor;
// If cursor is null, exit
if(!cursor) { return; }
// Get reference to the object at the cursor position
var record = e.cursor.value;
// Log object to the console
console.log("User: " + record.name + "; Role: " + record.role);
// Continue!
cursor.continue();
};
};
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010