Intro to HTML5 Web Storage

Web Storage

Dylan Schiemann (@dylans)
SitePen, Inc.
HTML5 Code Camp, October, 2010

© SitePen, Inc. All Rights Reserved

Sunday, October 17, 2010

Web Storage Timeline

Cookies
Flash Storage
Dojo Oﬄine/Storage, Google Gears
localStorage and sessionStorage
window[‘name’] hack
WebDatabase and IndexedDB


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


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....
}


WebSQL: Add Records

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);
}
);
});


WebSQL: Retrieve Records

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);
}
});
});


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


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
};


IndexedDB: Create a Store with Data


// 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!");
});

};


IndexedDB: Retrieve All Data


// 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();
};
};


Intro to HTML5 Web Storage

More Related Content

What's hot (20)

Similar to Intro to HTML5 Web Storage (20)

More from dylanks (9)

Recently uploaded (20)

Intro to HTML5 Web Storage