• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

An Overview of HTML5 Storage

  • 4,123 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,123
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
87
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 Storage Paul Irish Nov 1st, 2010 Monday, November 1, 2010
  • 2. Monday, November 1, 2010
  • 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. 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. 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. 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. 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. 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. 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. Before HTML5... Cookies Flash Storage Internet Explorer UserData Gears Dojo Storage Monday, November 1, 2010
  • 11. HTML5 storage options localStorage Web SQL sessionStorage Database IndexedDB App Cache Monday, November 1, 2010
  • 12. Local Storage Key/Value pairs Hashtable Avoids HTTP overhead of cookies Monday, November 1, 2010
  • 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. 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. 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. localStorage API Scoped to the origin http://example.com:80/ / / / | | _ port | _ domain _ scheme Monday, November 1, 2010
  • 17. JSBIN scratchpad Monday, November 1, 2010
  • 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. JSON & localStorage Best Friends. Setting... localStorage.setItem(‘bestobj’, JSON.stringify(obj)); Getting... var obj = JSON.parse( localStorage.getItem(‘bestobj’)); Monday, November 1, 2010
  • 20. textshadow presets! Monday, November 1, 2010
  • 21. Web SQL Database SQL database Basically wrapper around SQLite Monday, November 1, 2010
  • 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. 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. Transactions db.transaction(function(tx){}); db.readTransaction(function(tx){}); Both can optionally take an error and success callback Monday, November 1, 2010
  • 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. 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. But.... Web SQL Database.... Is kinda dead. Monday, November 1, 2010
  • 28. But.... Web SQL Database.... Is kinda dead. Monday, November 1, 2010
  • 29. But.... Web SQL Database.... Is kinda dead. Monday, November 1, 2010
  • 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. Creating an object store 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 } Key path must be the name of an enumerated property of all objects being stored in the object store DB versioning up to caller Monday, November 1, 2010
  • 32. Stocking the store var store = db.openObjectStore("Friends"); var brad = store.put({name: "Brad",                       gender: "male",                       likes: "yoga"}); console.log(brad.id); // 1 Auto-increment keys get  assigned automatically Schema flexible, store anything Monday, November 1, 2010
  • 33. Finding things Create indexes db.createObjectStore("Friend", "id", true); db.createIndex("FriendLikes", "Friend", "likes", false); db.createIndex("FriendName", "Friend", "name", false); Query using cursors 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. deciphering evercookie Monday, November 1, 2010
  • 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. 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. 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. Detecting Support if (Modernizr.localstorage) { ... } if (Modernizr.sessionstorage) { ... } if (Modernizr.websqldatabase) { ... } Monday, November 1, 2010
  • 39. Why again? Message inbox Twitter app Friends/Contact List Autocomplete++ Monday, November 1, 2010
  • 40. Crossbrowser? Yeah, totes! Monday, November 1, 2010
  • 41. Crossbrowser? Yeah, totes! Monday, November 1, 2010
  • 42. Go Deeper www.html5rocks.com/features/storage caniuse.com Chromium HTML5 google group #html5 on freenode IRC Monday, November 1, 2010
  • 43. Monday, November 1, 2010 ?