Your SlideShare is downloading. ×
An Overview of HTML5 Storage
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

An Overview of HTML5 Storage

4,284
views

Published on

Published in: Technology, Business

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,284
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
98
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 sessionStorage Web SQL 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 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. 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. 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. 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

×