Client Side Storage

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

Each to Their Own

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

Gearsvar 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

WHATWG DBvar db = openDatabase("Test", "1.0", "HTML5 Database API example",

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)

WHATWG Global Storage

WHATWG Global Storagefunction 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

userData DHTML Behavior

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

but when can we use these next generation APIs…

Browser Support

We tracked the support from our users onmeebo.com on Tuesday this week and…

87% of users have flash74% 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 [email protected]