Your SlideShare is downloading. ×
Notes on SF W3Conf
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

Notes on SF W3Conf


Published on

By Edy Dawson …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. San FranciscoFebruary 21-22, 2013
  • 2. About the W3Conference• Website:• Twitter:• Twitter:• Lanyard:• Video:
  • 3. Concentrations• Client-side storage options• Security• Ebooks• HTML5 capabilities• CSS advances• Mobile• Accessibility• Open source collaboration• JavaScript (EcmaScript) advances
  • 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. 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. – Web Storage
  • 7. - IndexedDB
  • 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. 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. 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. 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. 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. 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. Fall-back StrategyFor browsers that don’t supportWeb Storage or IndexedDB:• Cookies• Backbone.js• PersistJS• Amplify.js• Store.js• And many more…
  • 15. Chrome Web StorageParashuram Narasimhan Demos
  • 16. Chrome Web Storage
  • 17. Chrome Web StorageChrome Preferences > Show Advanced Settings >Privacy: Content settings… > All cookies and site data…
  • 18. Parashuram Narasimhan Demos
  • 19. Parashuram Narasimhan Demos
  • 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. Presenters• •• •• •• •• •• •• •• •• •
  • 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. Further Research• There was so much information, and so many great resources to investigate.• Thank you!