Erik Runyon, Director of Web Communications, University of Notre Dame led this session on storing data in the client browser and how you could leverage it to speed up your websites. He used this to power the #heweb14 website — which is how most of us were able to still access the conference website, even when the hotel wifi was totally borked!
Erik gave us overviews of three HTML5 technologies for storing data offline
IndexedDB and Web SQL
HTML5 defines two database technologies. Originally the Web SQL API was developed, but is now deprecated. The Indexed DB API is a newer spec and so support in browsers lag. There are JavaScript client libraries to combine the two to get the widest range of support.
Local and Session Storage
Both local and session storage allow the developer to store key/value pairs of strings. Both are scoped to the domain. Session storage only affects the tab it was created in. New tabs and windows, even for the same URL, do not share session storage.
Local storage is persistent across all of the windows and tabs. It also survives across entire browsing sessions. Local storage does not get cleared when a user clears cache. It must be specifically cleared by removing the web site data. Each browser has slightly different methods for accomplishing this.
Application Cache
This technology is used to allow an entire website (or portion of a site) to work offline. By adding a [manifest] attribute to the [HTML] tag, a developer indicates that the page will be stored for offline use. The associated cache manifest file must be served with the correct content type or the whole thing will be ignored. A cache manifest file has sections allowing a developer to specify which pages or resources are to be cached offline, only available when a network connection is available or a resource to serve when a connection is not available (fallback).
In addition, there are several JavaScript events that are fired when application cache is loading or updating. This allows an app to provide feedback to the user such as with a banner stating that a new version is available.
[field name=code]
