W3CONF

San FranciscoFebruary 21-22, 2013

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

Concentrations

• Client-side storage options• Security• Ebooks• HTML5 capabilities• CSS advances• Mobile• Accessibility• Open source collaboration• JavaScript (EcmaScript) advances

Client-side Storage Options

• Cookies•Web Storage•Web SQL (being discontinued in favor of IndexedDB)

• IndexedDB• File APIs• Frameworks (such as Backbone.js)

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

caniuse.com – Web Storage

caniuse.com - IndexedDB

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

Web Storage

• W3C Web Storage RecommendationDefines 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’));

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 }

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>

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); } }

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(); }

Fall-back Strategy

For browsers that don’t supportWeb Storage or IndexedDB:

• Cookies• Backbone.js• PersistJS• Amplify.js• Store.js• And many more…

Chrome Web StorageParashuram Narasimhan Demos

Chrome Web Storage

Chrome Web StorageChrome Preferences > Show Advanced Settings > Privacy: Content settings… > All cookies and site data…

Parashuram Narasimhan Demos

Parashuram Narasimhan Demos

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…

Presenters• Lea Verou

W3C Developer Relations

• Joshua DavisCode & Theory Developer

• Leonie WatsonDigital Accessibility Consultant

• Brad HillPayPal Security Researcher& W3C Security Co-chair

• Ariya HidayatSencha Engineering Director

• Luz CaballeroOpera Web Developer

• Tomomi ImuraNokia HTML5 Evangelist

• Nicolas GallagherTwitter Software Engineer

• Eric MeyerAn Event Apart co-founder, Web Standards Advocate

• Doug SchepersW3C Developer Relations Lead

• Janet SwisherMozilla Community Steward

• Alexis DeveriaAdobe & caniuse.com Developer

• Parashuram NarasimhanMicrosoft Open Source Developer

• Vicki MurleyApple Alumni Developer

• Kit CambridgeVoxer Javascript Developer

• Alexandru ChiculitaAdobe Systems Computer Scientist

• Jacob RossiMicrosoft IE Program Manager

• CJ GammonInteractive Developer,clients Google & Adobe

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

Further Research

• There was so much information, and so many great resources to investigate.

• Thank you!