Your SlideShare is downloading. ×
0
HTML5 Storage
Paul Irish
Nov 1st, 2010
Monday, November 1, 2010
Monday, November 1, 2010
Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filte...
Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filte...
Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filte...
Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filte...
Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filte...
Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filte...
Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filte...
Before HTML5...
Cookies
Flash Storage
Internet Explorer UserData
Gears
Dojo Storage
Monday, November 1, 2010
HTML5 storage options
localStorage
sessionStorage
Web SQL
Database
IndexedDB App Cache
Monday, November 1, 2010
Local Storage
Key/Value pairs
Hashtable
Avoids HTTP overhead of cookies
Monday, November 1, 2010
Local Storage
window.localStorage
persistent
window.sessionStorage
Last as long as browser is open
Survives page reloads a...
localStorage API
localStorage.setItem(‘someKey’, someValue);
localStorage.getItem(‘someKey’); // value
Can also use it dir...
localStorage API
localStorage.setItem(‘foo’,‘omg!’);
localStorage.getItem(‘foo’); // ‘omg!’
localStorage.length // num of ...
localStorage API
Scoped to the origin
http://example.com:80/
/ / /
| | _ port
| _ domain
_ scheme
Monday, November 1, 2010
JSBIN scratchpad
Monday, November 1, 2010
Native JSON
localStorage only stores strings
(so far!)
Everyone that supports localStorage supports
native JSON
JSON.strin...
JSON & localStorage
Best Friends.
Setting...
localStorage.setItem(‘bestobj’,
JSON.stringify(obj));
Getting...
var obj = JS...
textshadow presets!
Monday, November 1, 2010
Web SQL Database
SQL database
Basically wrapper around SQLite
Monday, November 1, 2010
openDatabase();
openDatabase(dbName, version, description,
estimatedSize, creationCallback)
var db = openDatabase('test', ...
openDatabase();
Size
Default database size 5MB
Prompted after that: 5, 10, 50, 100, etc.
Versioning
Required - Exception i...
Transactions
db.transaction(function(tx){});
db.readTransaction(function(tx){});
Both can optionally take an error and suc...
executeSql();
tx.executeSql('CREATE TABLE IF NOT EXISTS
test (id unique, text)');
tx.executeSql('INSERT INTO test (id, tex...
executeSql();
tx.executeSql('SELECT * FROM test', [],
 function (tx, results) {
  var len = results.rows.length, i;
   for...
But.... Web SQL
Database....
Is kinda dead.
Monday, November 1, 2010
But.... Web SQL
Database....
Is kinda dead.
Monday, November 1, 2010
But.... Web SQL
Database....
Is kinda dead.
Monday, November 1, 2010
IndexedDB
Object based data store
Locate records by key or index 
Asynchronous & Synchronous API
For the browser and for w...
Creating an object store
Key path must be the name of an enumerated property
of all objects being stored in the object sto...
Stocking the store
Auto-increment keys get 
assigned automatically
Schema flexible, store anything
var store = db.openObje...
Finding things
Create indexes
Query using cursors
db.createObjectStore("Friend", "id", true);
db.createIndex("FriendLikes"...
deciphering evercookie
Monday, November 1, 2010
Application Cache
A big offline bucket
Pretty good mobile support
Declarative API: 
http://www.whatwg.org/specs/web-apps/c...
Application Cache
<!doctype html>
<html manifest="myapp.manifest">
  <title>My offline app</title>
  <link rel="stylesheet...
Current Support
Local Storage
IE 8+, Firefox 3+, Safari 4+, Chrome 3+, Opera 10.5+
Native JSON
Firefox 3.5+, IE 8+, Chrome...
Detecting Support
if (Modernizr.localstorage) { ... }
if (Modernizr.sessionstorage) { ... }
if (Modernizr.websqldatabase) ...
Why again?
Message inbox
Twitter app
Friends/Contact List
Autocomplete++
Monday, November 1, 2010
Crossbrowser?
Yeah, totes!
Monday, November 1, 2010
Crossbrowser?
Yeah, totes!
Monday, November 1, 2010
Go Deeper
www.html5rocks.com/features/storage
caniuse.com
Chromium HTML5 google group
#html5 on freenode IRC
Monday, Novem...
?Monday, November 1, 2010
Upcoming SlideShare
Loading in...5
×

An Overview of HTML5 Storage

4,426

Published on

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

No Downloads
Views
Total Views
4,426
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
99
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×