Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (12)
Similar to Beyond Cookies, Persistent Storage For Web Applications Web Directions North 2009
Similar to Beyond Cookies, Persistent Storage For Web Applications Web Directions North 2009 (20)
Recently uploaded
Recently uploaded (20)
Beyond Cookies, Persistent Storage For Web Applications Web Directions North 2009
- 1. Beyond Cookies: Persistent Storage for Web Applications Brad Neuberg Google
- 2. What?
- 3. What? 4K
- 4. What? 4K 100K
- 5. What? 4K 100K 500K
- 6. What? 4K 100K 500K >1 MB
- 7. What? • Name/Value Storage • Database • Static Files
- 8. Why? “640K ought to be enough for anybody”
- 9. Why? “640K ought to be enough for anybody”
- 10. Why? • Offline • Capabilities of client • Lower Latency • No server • Performance • Privacy
- 11. Demo of GMail Offline
- 12. Zoo of Options Yahoo! BrowserPlus HTML 5
- 13. Zoo of Options HTML 5
- 14. HTML 5
- 16. sessionStorage • Per window • Example: purchasing plane tickets
- 17. sessionStorage <label> <input type=quot;checkbox” onchange=quot;sessionStorage.insurance = checkedquot;> I want insurance on this trip. </label>
- 18. sessionStorage <label> <input type=quot;checkbox” onchange=quot;sessionStorage.insurance = checkedquot;> I want insurance on this trip. </label> if (sessionStorage.insurance) { ... }
- 19. localStorage • Per site, multiple windows • Permanent • Example: storing user’s emails
- 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. 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. Storage Event • Fired when storage happens • Doesn’t bubble • On Window
- 23. Support • Firefox 2* & 3 • Internet Explorer 8 • Safari nightly
- 24. *Note Firefox 2 has older version of spec: function getStorage() { if (typeof localStorage != 'undefined') return localStorage; else return globalStorage[window.location.hostname]; }
- 26. HTML 5 Database
- 27. HTML 5 Database • Full relational database • SQLite • Asynchronous APIs
- 28. openDatabase openDatabase(dbName, version, displayName, expectedSize) var db = openDatabase(quot;MyDBquot;, quot;1.0quot;, quot;Examplequot;, 200000);
- 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. 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. INSERT db.transaction(function(tx) { tx.executeSql( quot;INSERT INTO COUNTRY quot; + quot; (id, name) VALUES (?, ?)quot;, ['1', 'United States']); });
- 32. Support • Safari 3.1 • iPhone OS 2.0+
- 33. iPhone Image: Chris Messina
- 35. View Source View Source of Database Demo
- 36. HTML 5 Application Cache
- 37. Application Cache • Ability to go offline • Cache UI files (JavaScript, HTML, etc.)
- 38. Application Cache • Point to manifest file: <html manifest=”foo.manifest”>
- 39. Application Cache • Point to manifest file: <html manifest=”foo.manifest”> • foo.manifest must have correct MIME type: • text/cache-manifest
- 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
- 42. Application Cache • Update process
- 43. Application Cache • Update process • Manifest file fetched
- 44. Application Cache • Update process • Manifest file fetched • If changed
- 45. Application Cache • Update process • Manifest file fetched • If changed • Files refetched in temp cache
- 46. Application Cache • Update process • Manifest file fetched • If changed • Files refetched in temp cache • When done, becomes real cache
- 47. Application Cache • Update process • Manifest file fetched • If changed • Files refetched in temp cache • When done, becomes real cache • Events are fired
- 48. Support • Firefox 3* and 3.1 • Safari 3* and 3.1 • iPhone OS 2.1+
- 49. Demo
- 50. Demo
- 51. Dojo Storage • Open source • Figures out best storage • Flash • HTML 5 • Gears
- 52. Dojo Storage • Name/value hashtable • storage.js (~13K GZip) • dojo.js (~26K) • http://dojotoolkit.org
- 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. Dojo Storage var message = dojox.storage.get(“message”);
- 55. Gears
- 56. JavaScript CSS HTML What is Gears?
- 57. JavaScript CSS HTML What is Gears?
- 58. JavaScript CSS HTML What is Gears?
- 59. JavaScript CSS HTML What is Gears?
- 60. JavaScript CSS HTML What is Gears?
- 61. JavaScript Database Desktop API CSS Client-Side Search Local Server HTML Blobs Worker Pool Ajax++
- 62. JavaScript File System API CSS Geolocation HTML Ajax++
- 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. 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. Local Server
- 66. Local Server • Run web applications offline • Capture UI: HTML, JavaScript, CSS • Serves locally even when connected
- 67. Beyond Cookies: Persistent Storage for Web Applications Brad Neuberg Google