Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Client Side Storage

6,015 views

Published on

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

Published in: Technology, Business

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]

×