Beyond Cookies, Persistent Storage For Web Applications Web Directions North 2009

5,280 views

Published on

Presentation on client-side storage options, including HTML 5, Dojo Storage, and Gears.

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • Is there a video / audio of this talk?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,280
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
106
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Beyond Cookies, Persistent Storage For Web Applications Web Directions North 2009

  1. 1. Beyond Cookies: Persistent Storage for Web Applications Brad Neuberg Google
  2. 2. What?
  3. 3. What? 4K
  4. 4. What? 4K 100K
  5. 5. What? 4K 100K 500K
  6. 6. What? 4K 100K 500K >1 MB
  7. 7. What? • Name/Value Storage • Database • Static Files
  8. 8. Why? “640K ought to be enough for anybody”
  9. 9. Why? “640K ought to be enough for anybody”
  10. 10. Why? • Offline • Capabilities of client • Lower Latency • No server • Performance • Privacy
  11. 11. Demo of GMail Offline
  12. 12. Zoo of Options Yahoo! BrowserPlus HTML 5
  13. 13. Zoo of Options HTML 5
  14. 14. HTML 5
  15. 15. Name/Value • sessionStorage • localStorage
  16. 16. sessionStorage • Per window • Example: purchasing plane tickets
  17. 17. sessionStorage <label> <input type=quot;checkbox” onchange=quot;sessionStorage.insurance = checkedquot;> I want insurance on this trip. </label>
  18. 18. sessionStorage <label> <input type=quot;checkbox” onchange=quot;sessionStorage.insurance = checkedquot;> I want insurance on this trip. </label> if (sessionStorage.insurance) { ... }
  19. 19. localStorage • Per site, multiple windows • Permanent • Example: storing user’s emails
  20. 20. localStorage <p>You have viewed this page <span id=quot;countquot;>an untold number of</span> time(s).</p> <script> if (!localStorage.pageLoadCount) localStorage.pageLoadCount = 0; localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount, 10) + 1; document.getElementById('count').textContent = localStorage.pageLoadCount; </script>
  21. 21. Storage Interface interface Storage { readonly attribute unsigned long length; DOMString key(in unsigned long index); DOMString getItem(in DOMString key); void setItem(in DOMString key, in DOMString data); void removeItem(in DOMString key); void clear(); };
  22. 22. Storage Event • Fired when storage happens • Doesn’t bubble • On Window
  23. 23. Support • Firefox 2* & 3 • Internet Explorer 8 • Safari nightly
  24. 24. *Note Firefox 2 has older version of spec: function getStorage() { if (typeof localStorage != 'undefined') return localStorage; else return globalStorage[window.location.hostname]; }
  25. 25. Demo localStorage Demo
  26. 26. HTML 5 Database
  27. 27. HTML 5 Database • Full relational database • SQLite • Asynchronous APIs
  28. 28. openDatabase openDatabase(dbName, version, displayName, expectedSize) var db = openDatabase(quot;MyDBquot;, quot;1.0quot;, quot;Examplequot;, 200000);
  29. 29. CREATE TABLE db.transaction(function(tx) { tx.executeSql(quot;CREATE TABLE IF NOT EXISTSquot; + quot;COUNTRY (id REAL UNIQUE, name TEXT)quot;, [], function(tx, result) { // SQL executed; do more work }); }, function(tx, error) { alert(error.message); return; });
  30. 30. SELECT db.transaction(function(tx) { tx.executeSql(quot;SELECT id, name FROM COUNTRYquot;, [], function(tx, result) { for (var i = 0; i < result.rows.length; + +i) { var row = result.rows.item(i); alert('id='+row['id'); alert(' name='+row['name']); } }, function(tx, err) { alert(err.message); } );
  31. 31. INSERT db.transaction(function(tx) { tx.executeSql( quot;INSERT INTO COUNTRY quot; + quot; (id, name) VALUES (?, ?)quot;, ['1', 'United States']); });
  32. 32. Support • Safari 3.1 • iPhone OS 2.0+
  33. 33. iPhone Image: Chris Messina
  34. 34. Demo Database Demo
  35. 35. View Source View Source of Database Demo
  36. 36. HTML 5 Application Cache
  37. 37. Application Cache • Ability to go offline • Cache UI files (JavaScript, HTML, etc.)
  38. 38. Application Cache • Point to manifest file: <html manifest=”foo.manifest”>
  39. 39. Application Cache • Point to manifest file: <html manifest=”foo.manifest”> • foo.manifest must have correct MIME type: • text/cache-manifest
  40. 40. Application Cache • Example manifest: CACHE MANIFEST # v1 # This is a comment. http://www.foo.com/index.html http://www.foo.com/header.png http://www.foo.com/blah/blah somethingElse.jpg
  41. 41. Application Cache
  42. 42. Application Cache • Update process
  43. 43. Application Cache • Update process • Manifest file fetched
  44. 44. Application Cache • Update process • Manifest file fetched • If changed
  45. 45. Application Cache • Update process • Manifest file fetched • If changed • Files refetched in temp cache
  46. 46. Application Cache • Update process • Manifest file fetched • If changed • Files refetched in temp cache • When done, becomes real cache
  47. 47. Application Cache • Update process • Manifest file fetched • If changed • Files refetched in temp cache • When done, becomes real cache • Events are fired
  48. 48. Support • Firefox 3* and 3.1 • Safari 3* and 3.1 • iPhone OS 2.1+
  49. 49. Demo
  50. 50. Demo
  51. 51. Dojo Storage • Open source • Figures out best storage • Flash • HTML 5 • Gears
  52. 52. Dojo Storage • Name/value hashtable • storage.js (~13K GZip) • dojo.js (~26K) • http://dojotoolkit.org
  53. 53. Dojo Storage dojox.storage.put(“message”, “hello world”, function(status, keyName){ if(status == dojox.storage.FAILED){ alert(quot;No permission!quot;); }else if(status == dojox.storage.SUCCESS){ // do something } } );
  54. 54. Dojo Storage var message = dojox.storage.get(“message”);
  55. 55. Gears
  56. 56. JavaScript CSS HTML What is Gears?
  57. 57. JavaScript CSS HTML What is Gears?
  58. 58. JavaScript CSS HTML What is Gears?
  59. 59. JavaScript CSS HTML What is Gears?
  60. 60. JavaScript CSS HTML What is Gears?
  61. 61. JavaScript Database Desktop API CSS Client-Side Search Local Server HTML Blobs Worker Pool Ajax++
  62. 62. JavaScript File System API CSS Geolocation HTML Ajax++
  63. 63. Database API 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()]);
  64. 64. Database API var rs; try { rs = db.execute('SELECT * FROM Test ORDER BY Timestamp DESC'); while (rs.isValidRow()) { console.log(rs.fieldByName(‘Phrase’) + '@' + rs.fieldByName(‘Timestamp’)); rs.next(); } } finally { rs.close(); db.close(); }
  65. 65. Local Server
  66. 66. Local Server • Run web applications offline • Capture UI: HTML, JavaScript, CSS • Serves locally even when connected
  67. 67. Beyond Cookies: Persistent Storage for Web Applications Brad Neuberg Google

×