Notes on SF W3Conf
Download as PPTX, PDF0 likes607 views
The document discusses client-side storage options for web applications, including cookies, Web Storage, IndexedDB, and File APIs. It provides details on each technology, including examples, limitations, and browser support. It emphasizes that IndexedDB and client-side storage can provide benefits like faster loading, reduced network usage, and the ability to work offline. The document also lists several sites that provide more information and tools for exploring these web storage technologies.
Notes on SF W3Conf
- 1. San Francisco February 21-22, 2013
- 2. About the W3Conference • Website: http://www.w3.org/conf/2013sf/ • Twitter: https://twitter.com/w3cconf • Twitter: https://twitter.com/search/realtime?q=%23w3conf • Lanyard: http://lanyrd.com/2013/w3conf/ • Video: http://www.w3.org/conf/2013sf/video.html
- 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. caniuse.com – Web Storage
- 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=“sessionStorage.insurance=checked ? ‘true’ : ‘’ “> I want insurance this trip. </label> Page 2: if (sessionStorage.insurance) { 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 = webkitIndexedDB.open(‘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(); xhr.open(‘GET’, ‘/img/childhood.png’, true); xhr.responseType = ‘arraybuffer’; xhr.onload = function(e) { saveImage(xhr.response); }; xhr.send(); }
- 14. Fall-back Strategy For browsers that don’t support Web Storage or IndexedDB: • Cookies • Backbone.js • PersistJS • Amplify.js • Store.js • And many more…
- 15. Chrome Web Storage Parashuram Narasimhan Demos
- 17. Chrome Web Storage Chrome Preferences > Show Advanced Settings > Privacy: Content settings… > All cookies and site data…
- 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 • Canisue.com: browser and device support for features • Html5rocks.com: 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 • WebPlatform.org: W3C standards and resources
- 23. Further Research • There was so much information, and so many great resources to investigate. • Thank you!