Peter Lubbers - Pro HTML 5 Programming

Using the HTML5 Web Storage API
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
The Web Storage API is surprisingly simple to use. We’ll start by covering simple storage and retrieval of
values and then move on to the differences between sessionStorage and localStorage. Finally, we’ll
look at the more advanced aspects of the API, such as event notification when values change.
Checking for Browser Support
The storage database for a given domain is accessed directly from the window object. Therefore,
determining if a user’s browser supports the Web Storage API is as easy as checking for the existence of
window.sessionStorage or window.localStorage. Listing 9-1 shows a routine that checks for storage
support and displays a message about the browser’s support for the Web Storage API. This routine is
part of the browser-test.html file and located in the code/storage folder. Instead of this code, you can
also use Modernizr, which handles some cases that may result in a false positive, such as the lack of
storage support in Chrome's incognito mode.
Listing 9-1. Checking for Web Storage Support
function checkStorageSupport() {
//sessionStorage
if (window.sessionStorage) {
alert('This browser supports sessionStorage');
} else {
alert('This browser does NOT support sessionStorage');
}
//localStorage
if (window.localStorage) {
alert('This browser supports localStorage');
} else {
alert('This browser does NOT support localStorage');
}
}
Figure 9-1 shows this check for storage support in action.
215