Preflight

Webkit

If using Google Chrome, you will likely need the Dev channel to see
all of the functionality in this presentation. If you are using
Safari, you will likely need a nightly build of Webkit in order to
see all of the functionality in this presentation.

Mozilla

You are running a Mozilla browser. While such browsers generally have
excellent support for HTML5 features, this presentation has only
been tested using Webkit browsers such as
Google Chrome or
Safari.
Eventually we hope to add Mozilla as a supported browser for this
presentation.

Other browser

You are running a browser that has not been tested with this
presentation. You may not be able to run some or all of the samples
listed here. While we want to add support for as many browsers as
possible, currently we only support Webkit-based browsers such as
Google Chrome or
Safari.

WebGL is enabled

WebGL is disabled

You will not be able to see the WebGL demo
later in the slide deck. If using Google Chrome, you will likely
need to run the Chrome executable using the
--enable-webgl flag.

Notification permission incorrect

You have granted permission for this page to show notifications.
If you intended to demo the request permission functionality, you
may want to clear this permission by clicking
here and removing
the permission.

Notification permission correct

No notification

Your browser does not support displaying notifications. Currently,
only Google Chrome
will support this functionality.

WebSQL DB: available

WebSQL DB is not supported

Indexed DB: available

Indexed DB is not supported

AppCache: available

AppCache is not supported

File APIs: available

File APIs are not supported

Your browser does not support one or more of the following APIs:
File, FileList, FileReader.

FileSystem APIs: available

FileSystem APIs are not supported

Your browser does not support the FileSystem APIs for
reading/writing files and directories. If using Google Chrome, you will likely
need to run the Chrome executable using the --unlimited-quota-for-files flag.

Welcome! (This field is for presenter notes and commentary.)
Press:

Space or ← / → to move around

Ctrl/Command / – or + to zoom in and out if slides don’t fit

N to show/hide speaker notes

H to highlight important elements in code snippets

3 to toggle 3D

HTML5 Storage

Eric Bidelman < e.bidelman@google.com >
@ebidel

Why?

Keep yourself organized

...instant retrieval of structured data

http://www.flickr.com/photos/squirmelia/2451382877/

Reduce network requests

...bandwidth is expensive!

http://http://www.flickr.com/photos/squirmelia/2451382877/

Performance

http://www.flickr.com/photos/warloofer/4203622857/

Before HTML5

Cookies

Flash Storage

Internet Explorer UserData

Google Gears

Dojo Storage

window.name ( hack )

Storage Options in HTML5

Web Storage APIs: localStorage / sessionStorage

Web SQL Database

IndexedDB

Application Cache

File* APIs

...Cookies

Web Storage APIs

localStorage / sessionStorage

localStorage

window.localStorage

Key / value pairs - hash table

Persistent on page reloads

Avoids HTTP overhead of cookies

Great for storing user preferences

Local Storage API

localStorage.setItem('someKey', someValue);
localStorage.getItem('someKey'); // value
// Can also access as a property, but not recommended.
localStorage.someKey = someValue;

JavaScript API
Debugging appcache is painful. If any part of the manifest fails to download,
the entire cache update fails. Luckily, the JS API has event information for just
about everything that the browser is doing behind the scenes.