Client Side Storage

5,907 views

Published on

An overview of the APIs available on the client for storing data.

Published in: Technology, Business
2 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
5,907
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
52
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide
  • Client Side Storage

    1. 1. more space… more opportunities…
    2. 2. 97% Web browsers support it, yet 0.001% of Web sites use it ?
    3. 3. Client Side Storage <ul><li>There are more options than cookies! </li></ul><ul><li>More widespread support for local storage than currently recognised </li></ul>
    4. 5. Each to Their Own <ul><li>Gears plugin </li></ul><ul><li>WHATWG DB </li></ul><ul><li>WHATWG Global/Session Storage </li></ul><ul><li>DHTML userData Behaviour </li></ul><ul><li>Flash cookies </li></ul>
    5. 6. Gears <ul><li>SQLite powered DB backend </li></ul><ul><li>no size limit on capacity (in the beta) </li></ul><ul><li>full text search </li></ul><ul><li>very low install base </li></ul>
    6. 7. Gears <ul><li>var db = google.gears.factory.create('beta.database'); </li></ul><ul><li>db.open('database-test'); </li></ul><ul><li>db.execute('CREATE TABLE IF NOT EXISTS Test </li></ul><ul><li>(Phrase text, Timestamp int)'); </li></ul><ul><li>db.execute('INSERT INTO Test VALUES (?, ?)‘, </li></ul><ul><li>['Monkey!', new Date().getTime()]); </li></ul><ul><li>var rs = db.execute( </li></ul><ul><li>'SELECT * FROM Test ORDER BY Timestamp DESC'); </li></ul><ul><li>while (rs.isValidRow()) { </li></ul><ul><li>alert(rs.field(0) + '@' + rs.field(1)); </li></ul><ul><li>rs.next(); </li></ul><ul><li>} </li></ul><ul><li>rs.close(); </li></ul>
    7. 8. WHATWG DB <ul><li>SQLite powered DB backend </li></ul><ul><li>Supported by Safari 3.1+, WebKit </li></ul><ul><li>Asynchronous execution API </li></ul>
    8. 9. WHATWG DB <ul><li>var db = openDatabase(&quot;Test&quot;, &quot;1.0&quot;, &quot;HTML5 Database API example&quot;, 200000); </li></ul><ul><li>db.transaction(function (tx) { </li></ul><ul><li>tx.executeSql('CREATE TABLE IF NOT EXISTS Test </li></ul><ul><li>(Phrase text, Timestamp int)'); </li></ul><ul><li>tx.executeSql('INSERT INTO Test VALUES (?, ?)', </li></ul><ul><li>['Monkey!', new Date().getTime()]); </li></ul><ul><li>tx.executeSql('SELECT * FROM Test ORDER BY Timestamp DESC', [], function(tx, result) { </li></ul><ul><li>for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); </li></ul><ul><li>alert(row['Phrase'] + '@' + row['Timestamp']); </li></ul><ul><li>} </li></ul><ul><li>}, function(tx, error) { </li></ul><ul><li>alert('Failed accessing database - ' + error.message); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
    9. 10. WHATWG Global Storage <ul><li>FF 2.0+, IE 8.0 </li></ul><ul><li>globalStorage and sessionStorage </li></ul><ul><li>Events are fired when keys are modified </li></ul><ul><li>up to 5MB per accessible bucket (e.g. www.meebo.com's bucket includes meebo.com) </li></ul>
    10. 11. WHATWG Global Storage
    11. 12. WHATWG Global Storage <ul><li>function onStorage (e) { </li></ul><ul><li>e = e || event; </li></ul><ul><li>alert('Storage event fired for domain: ' + event.domain); </li></ul><ul><li>} </li></ul><ul><li>if (document.addEventListnener) { </li></ul><ul><li>document.addEventListener('storage', onStorage, false); </li></ul><ul><li>} else { </li></ul><ul><li>document.attachEvent('onstorage', onStorage); </li></ul><ul><li>} </li></ul><ul><li>var storage = globalStorage[location.hostname]; </li></ul><ul><li>storage.user = 'paul'; </li></ul>
    12. 13. userData DHTML Behavior <ul><li>IE 5.5+ </li></ul><ul><li>Stores data in an XML document </li></ul><ul><li>128KB per document and 1MB per domain </li></ul><ul><li>Uses DHTML Behaviors </li></ul>
    13. 14. userData DHTML Behavior <ul><li>var el = document.createElement('div'); </li></ul><ul><li>el.addBehavior('#default#userData'); </li></ul><ul><li>el.load('data'); </li></ul><ul><li>el.setAttribute('user', 'paul'); </li></ul><ul><li>el.save('data'); </li></ul>
    14. 15. Flash Cookies <ul><li>100KB of space and you can prompt the user to ask for more </li></ul><ul><li>You’ll need to include a SWF wrapper and use asynchronous calls </li></ul>
    15. 16. but when can we use these next generation APIs…
    16. 17. Browser Support <ul><li>We tracked the support from our users on </li></ul><ul><li>meebo.com on Tuesday this week and… </li></ul><ul><li>87% of users have flash </li></ul><ul><li>74% of users have native client storage (whatwgdb, globalStorage, userData) </li></ul><ul><li>97% of users have either flash or native storage </li></ul><ul><li>… only 96% of our users have cookies! </li></ul>
    17. 18. Thanks! Paul Sowden [email_address]

    ×