client side storage
DESCRIPTION
An overview of the APIs available on the client for storing data.TRANSCRIPT
![Page 1: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/1.jpg)
more space…more opportunities…
![Page 2: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/2.jpg)
?97% Web browsers support it, yet 0.001% of
Web sites use it
![Page 3: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/3.jpg)
Client Side Storage
There are more options than
cookies!
More widespread support for local
storage than currently recognised
![Page 4: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/4.jpg)
![Page 5: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/5.jpg)
Each to Their Own
Gears plugin
WHATWG DB
WHATWG Global/Session Storage
DHTML userData Behaviour
Flash cookies
![Page 6: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/6.jpg)
Gears
SQLite powered DB backend
no size limit on capacity (in the
beta)
full text search
very low install base
![Page 7: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/7.jpg)
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();
![Page 8: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/8.jpg)
WHATWG DB
SQLite powered DB backend
Supported by Safari 3.1+, WebKit
Asynchronous execution API
![Page 9: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/9.jpg)
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);
});});
![Page 10: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/10.jpg)
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)
![Page 11: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/11.jpg)
WHATWG Global Storage
![Page 12: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/12.jpg)
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';
![Page 13: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/13.jpg)
userData DHTML Behavior
IE 5.5+
Stores data in an XML document
128KB per document and 1MB per
domain
Uses DHTML Behaviors
![Page 14: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/14.jpg)
userData DHTML Behavior
var el = document.createElement('div');el.addBehavior('#default#userData');
el.load('data');el.setAttribute('user', 'paul');el.save('data');
![Page 15: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/15.jpg)
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
![Page 16: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/16.jpg)
but when can we use these next generation APIs…
![Page 17: Client Side Storage](https://reader033.vdocuments.net/reader033/viewer/2022061303/5492da7bac7959182e8b471d/html5/thumbnails/17.jpg)
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!