By Edy Dawson Feb. 21-22, 2013 San Francisco

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

7. caniuse.com - 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=“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

16. Chrome Web Storage

17. Chrome Web Storage
Chrome 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
• 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!