An Overview of HTML5 Storage

5,321 views

Published on

Published in: Technology, Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,321
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
114
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

An Overview of HTML5 Storage

  1. 1. HTML5 Storage Paul Irish Nov 1st, 2010 Monday, November 1, 2010
  2. 2. Monday, November 1, 2010
  3. 3. Why use local storage? Decrease page load time Reduce # of HTTP requests WordPress admin UI Put processing (sorting, filtering, etc.) on client MySpace Inbox Searching Monday, November 1, 2010
  4. 4. Why use local storage? Decrease page load time Reduce # of HTTP requests WordPress admin UI Put processing (sorting, filtering, etc.) on client MySpace Inbox Searching Monday, November 1, 2010
  5. 5. Why use local storage? Decrease page load time Reduce # of HTTP requests WordPress admin UI Put processing (sorting, filtering, etc.) on client MySpace Inbox Searching Monday, November 1, 2010
  6. 6. Why use local storage? Decrease page load time Reduce # of HTTP requests WordPress admin UI Put processing (sorting, filtering, etc.) on client MySpace Inbox Searching Monday, November 1, 2010
  7. 7. Why use local storage? Decrease page load time Reduce # of HTTP requests WordPress admin UI Put processing (sorting, filtering, etc.) on client MySpace Inbox Searching Monday, November 1, 2010
  8. 8. Why use local storage? Decrease page load time Reduce # of HTTP requests WordPress admin UI Put processing (sorting, filtering, etc.) on client MySpace Inbox Searching Monday, November 1, 2010
  9. 9. Why use local storage? Decrease page load time Reduce # of HTTP requests WordPress admin UI Put processing (sorting, filtering, etc.) on client MySpace Inbox Searching Monday, November 1, 2010
  10. 10. Before HTML5... Cookies Flash Storage Internet Explorer UserData Gears Dojo Storage Monday, November 1, 2010
  11. 11. HTML5 storage options localStorage sessionStorage Web SQL Database IndexedDB App Cache Monday, November 1, 2010
  12. 12. Local Storage Key/Value pairs Hashtable Avoids HTTP overhead of cookies Monday, November 1, 2010
  13. 13. Local Storage window.localStorage persistent window.sessionStorage Last as long as browser is open Survives page reloads and restores Opening page in new window or tab starts new session Monday, November 1, 2010
  14. 14. localStorage API localStorage.setItem(‘someKey’, someValue); localStorage.getItem(‘someKey’); // value Can also use it directly, but not recommended localStorage.someKey = someValue; Monday, November 1, 2010
  15. 15. localStorage API localStorage.setItem(‘foo’,‘omg!’); localStorage.getItem(‘foo’); // ‘omg!’ localStorage.length // num of items stored localStorage.key(0); // ‘foo’ localStorage.removeItem(‘foo’); localStorage.clear(); Monday, November 1, 2010
  16. 16. localStorage API Scoped to the origin http://example.com:80/ / / / | | _ port | _ domain _ scheme Monday, November 1, 2010
  17. 17. JSBIN scratchpad Monday, November 1, 2010
  18. 18. Native JSON localStorage only stores strings (so far!) Everyone that supports localStorage supports native JSON JSON.stringify( obj ); JSON.parse( somejsonstring ); Monday, November 1, 2010
  19. 19. JSON & localStorage Best Friends. Setting... localStorage.setItem(‘bestobj’, JSON.stringify(obj)); Getting... var obj = JSON.parse( localStorage.getItem(‘bestobj’)); Monday, November 1, 2010
  20. 20. textshadow presets! Monday, November 1, 2010
  21. 21. Web SQL Database SQL database Basically wrapper around SQLite Monday, November 1, 2010
  22. 22. openDatabase(); openDatabase(dbName, version, description, estimatedSize, creationCallback) var db = openDatabase('test', '1.0', 'test database', 2 * 1024 * 1024, myCallback); Monday, November 1, 2010
  23. 23. openDatabase(); Size Default database size 5MB Prompted after that: 5, 10, 50, 100, etc. Versioning Required - Exception if doesn't match Creation Callback Called if database is brand new Returns null if not successful Monday, November 1, 2010
  24. 24. Transactions db.transaction(function(tx){}); db.readTransaction(function(tx){}); Both can optionally take an error and success callback Monday, November 1, 2010
  25. 25. executeSql(); tx.executeSql('CREATE TABLE IF NOT EXISTS test (id unique, text)'); tx.executeSql('INSERT INTO test (id, text) VALUES (?, ?)', [someId, someText]); Monday, November 1, 2010
  26. 26. executeSql(); tx.executeSql('SELECT * FROM test', [],  function (tx, results) {   var len = results.rows.length, i;    for (i = 0; i < len; i++) {     console.log(results.rows.item(i).text);    }  } ); Monday, November 1, 2010
  27. 27. But.... Web SQL Database.... Is kinda dead. Monday, November 1, 2010
  28. 28. But.... Web SQL Database.... Is kinda dead. Monday, November 1, 2010
  29. 29. But.... Web SQL Database.... Is kinda dead. Monday, November 1, 2010
  30. 30. IndexedDB Object based data store Locate records by key or index  Asynchronous & Synchronous API For the browser and for web workers Monday, November 1, 2010
  31. 31. Creating an object store Key path must be the name of an enumerated property of all objects being stored in the object store DB versioning up to caller var db = window.indexedDB.open("FriendDB", "My Friends!"); if (db.version != "1") {   // User's first visit, initialize database.   db.createObjectStore("Friends",  // Name                        "id",       // Key Path                        true);      // Auto Increment   db.setVersion("1"); } else {   // DB already initialized } Monday, November 1, 2010
  32. 32. Stocking the store Auto-increment keys get  assigned automatically Schema flexible, store anything var store = db.openObjectStore("Friends"); var brad = store.put({name: "Brad",                       gender: "male",                       likes: "yoga"}); console.log(brad.id); // 1 Monday, November 1, 2010
  33. 33. Finding things Create indexes Query using cursors db.createObjectStore("Friend", "id", true); db.createIndex("FriendLikes", "Friend", "likes", false); db.createIndex("FriendName", "Friend", "name", false); var index = db.openIndex("FriendLikes"); var range = new KeyRange.bound("B", "C"); var cursor = index.openObjectCursor(range); var moreFriends = true; while (moreFriends) {   alert(cursor.value.name);   moreFriends = cursor.continue(); } Monday, November 1, 2010
  34. 34. deciphering evercookie Monday, November 1, 2010
  35. 35. Application Cache A big offline bucket Pretty good mobile support Declarative API:  http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline Programmable API:  http://www.w3.org/TR/DataCache/ Monday, November 1, 2010
  36. 36. Application Cache <!doctype html> <html manifest="myapp.manifest">   <title>My offline app</title>   <link rel="stylesheet" href="myapp.css">   <img src="myapp.png" />    <script src="myapp.js"></script> </html> CACHE MANIFEST myapp.html myapp.js myapp.css myapp.png Monday, November 1, 2010
  37. 37. Current Support Local Storage IE 8+, Firefox 3+, Safari 4+, Chrome 3+, Opera 10.5+ Native JSON Firefox 3.5+, IE 8+, Chrome 4+, Safari 4+, Opera 10.5+ Web SQL Database Safari 3.2+, Chrome 3.0+, Opera 10.5+ IndexedDB Chrome 8, Firefox 4.0 Application Cache (Manifest) Firefox 3.5+, Chrome 4+, Safari 4+ Monday, November 1, 2010
  38. 38. Detecting Support if (Modernizr.localstorage) { ... } if (Modernizr.sessionstorage) { ... } if (Modernizr.websqldatabase) { ... } Monday, November 1, 2010
  39. 39. Why again? Message inbox Twitter app Friends/Contact List Autocomplete++ Monday, November 1, 2010
  40. 40. Crossbrowser? Yeah, totes! Monday, November 1, 2010
  41. 41. Crossbrowser? Yeah, totes! Monday, November 1, 2010
  42. 42. Go Deeper www.html5rocks.com/features/storage caniuse.com Chromium HTML5 google group #html5 on freenode IRC Monday, November 1, 2010
  43. 43. ?Monday, November 1, 2010

×