HTML5 Storage/Cache

1,703 views

Published on

About HTML5 Storage Solutions and Application Cache.

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

No Downloads
Views
Total views
1,703
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 Storage/Cache

  1. 1. HTML5 Storage & Cache @yorzi andy@intridea.com
  2. 2. General Introduction
  3. 3. Background World Wide Web Consortium (W3C) + Web Hypertext Application Technology Working Group (WHATWG)
  4. 4. History ● 1991 HTML ● 1994 HTML 2 ● 1996 CSS 1 + JavaScript ● 1997 HTML 4 ● 1998 CSS 2 ● 2000 XHTML 1 ● 2002 Tableless Web Design ● 2005 AJAX ● 2009 HTML5 ~= HTML + CSS + JS
  5. 5. Design Rules ● Based on HTML, CSS, DOM, and JS ● Reduce the need for external plugins ( Flash) ● Better error handling ● More markup to replace scripting ● HTML5 should be device independent ● The development process should be visible to the public
  6. 6. Minimum Sample <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
  7. 7. Browser Compatiblity
  8. 8. Features
  9. 9. Storage & Cache
  10. 10. Before HTML5 ● Cookies ● Flash Storage ● Internet Explorer UserData ● Google Gears ● window.name ( hack )
  11. 11. Storage In HTML5 ● Web Storage APIs: localStorage / sessionStorage ● Web SQL Database ● IndexedDB ● Application Cache ● ...Cookies
  12. 12. window.localStorage ● Key/value hash table ● Persistent on page reloads ● Avoids cookies’ limitations ● Scoped to an origin http://example.com:80/ _ port _ domain _ scheme
  13. 13. localStorage API localStorage.setItem('someKey', someValue); localStorage.getItem('someKey'); // value // Can also access as a property, but not recommended. localStorage.someKey = someValue; // Orther samples localStorage.setItem('dateOfBirth', '1984-07-22'); localStorage.getItem('dateOfBirth'); // '1984-07-22' localStorage.length // num of items stored localStorage.key(0); // 'dateOfBirth' localStorage.removeItem('dateOfBirth'); localStorage.clear();
  14. 14. window.sessionStorage Same as localStorage but... ● Lasts as long as browser is open ● Opening page in new window or tab starts new session
  15. 15. Web Storage APIs Limitation Web Storage APIs only store strings! Solution: localStorage.setItem('user', JSON.stringify({user: 'john', id: 10})); var user = JSON.parse(localStorage.getItem('user'));
  16. 16. Web SQL Database ● Client-side SQL database ● Asynchronous & Synchronous* API ● Basically wrapper around SQLite
  17. 17. window.openDatabase(); var db = window.openDatabase( 'MyDB', // dbName '1.0', // version 'test database', // description 2 * 1024 * 1024, // estimatedSize in bytes function(db) {} // optional creationCallback );
  18. 18. window.executeSql();
  19. 19. Transaction
  20. 20. Deprecated
  21. 21. Indexed Database ● Object based data store ● In-order retrieval by index or locate by key ● Asynchronous & Synchronous API
  22. 22. Object Store var db = window.indexedDB.open('IntrideaDB', 1); if (db.version != '1') { // User's first visit, initialize database. db.createObjectStore('Friends', // name of new object store 'id', // key path true); // auto increment? db.setVersion('1'); } else { // DB already initialized. }
  23. 23. Put into Store var store = db.openObjectStore('Friends'); var user = store.put({name: 'Eric', gender: 'male', likes: 'html5'}); console.log(user.id); // Expect 1
  24. 24. Retrieving by key ( indexes ) db.createIndex(indexName, keyPath, unique?); // db.createObjectStore("Friend", "id", true); db.createIndex("FriendNames", "name", false); var index = db.openIndex('FriendNames'); var id = index.get('Eric');
  25. 25. Querying ( cursors ) db.createIndex(indexName, keyPath, unique?); // db.createObjectStore("Friend", "id", true); db.createIndex("FriendNames", "name", false); var index = db.openIndex('FriendNames'); var id = index.get('Eric');
  26. 26. Web SQL DB VS. Indexed DB
  27. 27. Application Cache ( Why? ) * HTML, CSS, and JS stay fairly consistent * Native browser caching is unreliable * Caching resources creates speedier apps! * Decent mobile support
  28. 28. Menifest File
  29. 29. JS API
  30. 30. Detecting Support if (Modernizr.localstorage) { ... } if (Modernizr.sessionstorage) { ... } if (Modernizr.websqldatabase) { ... } if (Modernizr.indexeddb) { ... } if (Modernizr.applicationcache) { ... }
  31. 31. Resources http://www.html5rocks.com/en/resources http://html5labs.interoperabilitybridges.com http://html5-demos.appspot. com/static/html5storage/index.html
  32. 32. Thanks!

×