Peter Lubbers - Pro HTML 5 Programming

There are three important points to notice from this storage access statement:
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
• The object implementing the Web Storage API is attached to the window, so
window.sessionStorage contains the functions you need to call.
• The function we are calling is setItem, which takes a key string and a value string.
Although the formal Web Storage API supports passing in nonstring values,
current browsers are limited in the value types they support.
• This particular call will set into the session storage the string myFirstValue, which
can later be retrieved by the key myFirstKey.
To retrieve the value, the long-hand notation involves making a call to the getItem function. For
example, if we augmented our previous example with the following statement
alert(window.sessionStorage.getItem(‘myFirstKey’));
the browser raises a JavaScript alert displaying the text myFirstValue. As you can see, setting and
retrieving values from the Web Storage API is very straightforward.
However, there is an even simpler way to access the storage objects in your code. You are also able
to use expando-properties to set values in storage. Using this approach, the setItem and getItem calls
can be avoided entirely by simply setting and retrieving values corresponding to the key-value pair
directly on the sessionStorage object. Using this approach, our value set call can be rewritten as follows:
window.sessionStorage.myFirstKey = ‘myFirstValue’;
Similarly, the value retrieval call can be rewritten like so:
alert(window.sessionStorage.myFirstKey);
That’s it for the basics. You now have all the knowledge you need to use session storage in your
application. However, you might be wondering what’s so special about this sessionStorage object. After
all, JavaScript allows you to set and get properties on nearly any object. The difference is in the scope.
What you may not have realized is that our example set and get calls do not need to occur in the same
web page. As long as pages are served from the same origin—the combination of scheme, host, and
port—then values set on sessionStorage can be retrieved from other pages using the same keys. This
also applies to subsequent loads of the same page. As a developer, you are probably used to the idea that
changes made in script will disappear whenever a page is reloaded. That is no longer true for values that
are set in the Web Storage API; they will continue to exist across page loads.
Plugging Data Leaks
How long do the values persist? For objects set into sessionStorage, they will persist as long as the
browser window (or tab) is not closed. As soon as a user closes the window—or browser, for that
matter—the sessionStorage values are cleared out. It is useful to consider a sessionStorage value to be
somewhat like a sticky note reminder. Values put into sessionStorage won’t last long, and you should
not put anything truly valuable into them, as the values are not guaranteed to be around whenever you
are looking for them.
Why, then, would you choose to use the session storage area in your web application? Session
storage is perfect for short-lived processes that would normally be represented in wizards or dialogs. If
you have data to store over the course of a few pages, that you would not be keen to have resurface the
217