more space… more opportunities…

97% Web browsers support it, yet 0.001% of Web sites use it ?

Client Side Storage There are more options than cookies! More widespread support for local storage than currently recognised

There are more options than cookies!

More widespread support for local storage than currently recognised

Each to Their Own Gears plugin WHATWG DB WHATWG Global/Session Storage DHTML userData Behaviour Flash cookies

Gears plugin

WHATWG DB

WHATWG Global/Session Storage

DHTML userData Behaviour

Flash cookies

Gears SQLite powered DB backend no size limit on capacity (in the beta) full text search very low install base

SQLite powered DB backend

no size limit on capacity (in the beta)

full text search

very low install base

Gears var db = google.gears.factory.create('beta.database'); db.open('database-test'); db.execute('CREATE TABLE IF NOT EXISTS Test (Phrase text, Timestamp int)'); db.execute('INSERT INTO Test VALUES (?, ?)‘, ['Monkey!', new Date().getTime()]); var rs = db.execute( 'SELECT * FROM Test ORDER BY Timestamp DESC'); while (rs.isValidRow()) { alert(rs.field(0) + '@' + rs.field(1)); rs.next(); } rs.close();

var db = google.gears.factory.create('beta.database');

db.open('database-test');

db.execute('CREATE TABLE IF NOT EXISTS Test

(Phrase text, Timestamp int)');

db.execute('INSERT INTO Test VALUES (?, ?)‘,

['Monkey!', new Date().getTime()]);

var rs = db.execute(

'SELECT * FROM Test ORDER BY Timestamp DESC');

while (rs.isValidRow()) {

alert(rs.field(0) + '@' + rs.field(1));

rs.next();

}

rs.close();

WHATWG DB SQLite powered DB backend Supported by Safari 3.1+, WebKit Asynchronous execution API

SQLite powered DB backend

Supported by Safari 3.1+, WebKit

Asynchronous execution API

WHATWG DB var db = openDatabase(&quot;Test&quot;, &quot;1.0&quot;, &quot;HTML5 Database API example&quot;, 200000); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS Test (Phrase text, Timestamp int)'); tx.executeSql('INSERT INTO Test VALUES (?, ?)', ['Monkey!', new Date().getTime()]); tx.executeSql('SELECT * FROM Test ORDER BY Timestamp DESC', [], function(tx, result) { for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); alert(row['Phrase'] + '@' + row['Timestamp']); } }, function(tx, error) { alert('Failed accessing database - ' + error.message); }); });

var db = openDatabase(&quot;Test&quot;, &quot;1.0&quot;, &quot;HTML5 Database API example&quot;, 200000);

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS Test

(Phrase text, Timestamp int)');

tx.executeSql('INSERT INTO Test VALUES (?, ?)',

['Monkey!', new Date().getTime()]);

tx.executeSql('SELECT * FROM Test ORDER BY Timestamp DESC', [], function(tx, result) {

for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i);

alert(row['Phrase'] + '@' + row['Timestamp']);

}

}, function(tx, error) {

alert('Failed accessing database - ' + error.message);

});

});

WHATWG Global Storage FF 2.0+, IE 8.0 globalStorage and sessionStorage Events are fired when keys are modified up to 5MB per accessible bucket (e.g. www.meebo.com's bucket includes meebo.com)

FF 2.0+, IE 8.0

globalStorage and sessionStorage

Events are fired when keys are modified

up to 5MB per accessible bucket (e.g. www.meebo.com's bucket includes meebo.com)

WHATWG Global Storage

WHATWG Global Storage function onStorage (e) { e = e || event; alert('Storage event fired for domain: ' + event.domain); } if (document.addEventListnener) { document.addEventListener('storage', onStorage, false); } else { document.attachEvent('onstorage', onStorage); } var storage = globalStorage[location.hostname]; storage.user = 'paul';

function onStorage (e) {

e = e || event;

alert('Storage event fired for domain: ' + event.domain);

}

if (document.addEventListnener) {

document.addEventListener('storage', onStorage, false);

} else {

document.attachEvent('onstorage', onStorage);

}

var storage = globalStorage[location.hostname];

storage.user = 'paul';

userData DHTML Behavior IE 5.5+ Stores data in an XML document 128KB per document and 1MB per domain Uses DHTML Behaviors

IE 5.5+

Stores data in an XML document

128KB per document and 1MB per domain

Uses DHTML Behaviors

userData DHTML Behavior var el = document.createElement('div'); el.addBehavior('#default#userData'); el.load('data'); el.setAttribute('user', 'paul'); el.save('data');

var el = document.createElement('div');

el.addBehavior('#default#userData');

el.load('data');

el.setAttribute('user', 'paul');

el.save('data');

Flash Cookies 100KB of space and you can prompt the user to ask for more You’ll need to include a SWF wrapper and use asynchronous calls

100KB of space and you can prompt the user to ask for more

You’ll need to include a SWF wrapper and use asynchronous calls

but when can we use these next generation APIs…

Browser Support We tracked the support from our users on meebo.com on Tuesday this week and… 87% of users have flash 74% of users have native client storage (whatwgdb, globalStorage, userData) 97% of users have either flash or native storage … only 96% of our users have cookies!

We tracked the support from our users on

meebo.com on Tuesday this week and…

87% of users have flash

74% of users have native client storage (whatwgdb, globalStorage, userData)

97% of users have either flash or native storage

… only 96% of our users have cookies!

Thanks! Paul Sowden [email_address]