Notes on SF W3Conf


Published on

By Edy Dawson

Feb. 21-22, 2013
San Francisco

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Notes on SF W3Conf

  1. 1. San FranciscoFebruary 21-22, 2013
  2. 2. About the W3Conference• Website:• Twitter:• Twitter:• Lanyard:• Video:
  3. 3. Concentrations• Client-side storage options• Security• Ebooks• HTML5 capabilities• CSS advances• Mobile• Accessibility• Open source collaboration• JavaScript (EcmaScript) advances
  4. 4. Client-side Storage Options• Cookies• Web Storage• Web SQL (being discontinued in favor of IndexedDB)• IndexedDB• File APIs• Frameworks (such as Backbone.js)
  5. 5. Why Use Client-side Storage?• Mobile applications• Disconnected applications (To Do Lists, Image Processors)• Partially disconnected applications (Mail Clients, Calendar, Field Devices)• Faster web sites with offline storage (Offline Catalogs, User Preferences)• Reduce network traffic• Significantly speed up display times• Save temporary state• Richer UI experience with user-updated data• Prevent work loss from network disconnects
  6. 6. – Web Storage
  7. 7. - IndexedDB
  8. 8. Cookies• Included in every http request• Data is sent unencrypted over the internet• Restricted to 4KB storage on client-side• Stores only strings• Used for: - shopping carts - user login - personalization - ad tracking - analytics
  9. 9. Web Storage• W3C Web Storage Recommendation Defines an API for persistent data storage of key-value pair data in Web Clients• localStorage and sessionStorage• Data is stored as string, or objects using JSON.stringify, have to convert other types such as ints, floats, objects, and booleans• Limited to approx. 2.5 - 5MB per application• Can hook into browser events, such as offline, online, storage change• Can be disabled by the user or system administrator• Don’t store sensitive data, as like cookies, vulnerable to cross site scripting attacks• Example: localStorage.setItem(‘favoriteFish’, ‘herring’); $(‘#demo’).html(‘My fav fish is: ‘ + localStorage.getItem(‘favoriteFish’));
  10. 10. HTML5 sessionStorage• User carrying out single transaction, but could have multiple transactions in different windows at the same time. Cookies don’t handle this case well. Session ends when browser closed• Each page has own copy of the session storage object• Example: Two page interaction Page 1: <label> <input type=“checkbox” onchange=“ ? ‘true’ : ‘’ “> I want insurance this trip. </label> Page 2: if ( { your code here }
  11. 11. HTML5 localStorage• Spans multiple windows, and lasts beyond current session• Is not transmitted with every request like cookies• Example: Storing user data <p> You have viewed this page <span id=“count”> number of </span> time(s). </p> <script> if (!localStorage.pageLoadCount) localStorage.pageLoadCount = 0; localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1; document.getElementById(‘count’).textContent = localStorage.pageLoadCount; </script>
  12. 12. IndexedDB• Indexed Data API W3C Working Draft: In-browser database with key-value pairs and basic indexing• Available in Synchronous API & Asynchronous API• Stores most JS Objects• Temporary: up to 20% of available space per app• Permanent: can request up to 100% of available space• Example: function createDB() { var openRequest =‘Favorites’, ‘2’); openRequest.onerror = errorHandler; openRequest.onsuccess = function(e) { db = openRequest.result; createStore(db); } }
  13. 13. File APIs• Stores text and binary• FileReader API and FileWriter API• Example: function fetchImage() { var xhr = new XMLHttpRequest();‘GET’, ‘/img/childhood.png’, true); xhr.responseType = ‘arraybuffer’; xhr.onload = function(e) { saveImage(xhr.response); }; xhr.send(); }
  14. 14. Fall-back StrategyFor browsers that don’t supportWeb Storage or IndexedDB:• Cookies• Backbone.js• PersistJS• Amplify.js• Store.js• And many more…
  15. 15. Chrome Web StorageParashuram Narasimhan Demos
  16. 16. Chrome Web Storage
  17. 17. Chrome Web StorageChrome Preferences > Show Advanced Settings >Privacy: Content settings… > All cookies and site data…
  18. 18. Parashuram Narasimhan Demos
  19. 19. Parashuram Narasimhan Demos
  20. 20. Security of IndexedDB• Mozilla info: IndexedDB uses the same-origin principle, which ties the store to the origin that creates it (typically, it is the site domain or subdomain), so it can’t be accessed by any other origin• Doesn’t work for content loaded from another site (either <frame> or <iframe>)• Not recommended for sensitive data• More on security in another meeting…
  21. 21. Presenters• •• •• •• •• •• •• •• •• •
  22. 22. Helpful Sites• browser and device support for features• Google project about HTML5• HTML5 & CSS3 Readiness: Browser support tool• HTML Living Standard: Web Storage specifics• My Web Store: Example of IndexedDB by Parashuram• Using IndexedDB: Mozilla Developer Network How-To• Client-side Storage: Interesting comparison• W3C standards and resources
  23. 23. Further Research• There was so much information, and so many great resources to investigate.• Thank you!