Peter Lubbers - Pro HTML 5 Programming

Listing 9-14. JSON Object Storage
var data;
function loadData() {
data = JSON.parse(sessionStorage["myStorageKey"])
}
function saveData() {
sessionStorage["myStorageKey"] = JSON.stringify(data);
}
window.addEventListener("load", loadData, true);
window.addEventListener("unload", saveData, true);
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
As you can see, the script contains event listeners to register handlers for load and unload events in
the browser window. In this case, the handlers call the loadData() and saveData() functions,
respectively.
In the loadData() function, the session storage area is queried for the value of a storage key, and that
key is passed to the JSON.parse() function. The JSON.parse() routine will take a previously saved string
representation of an object and reconstitute it into a copy of the original. This routine is called every
time the page loads.
Similarly, the saveData() function takes a data value and calls JSON.stringify() on it to turn it into a
string representation of the object. That string is, in turn, stored back into storage. By registering the
saveData() function on the unload browser event, we ensure that it is called every time the user navigates
away or shuts down the browser or window.
The practical result of these two functions is that any object we wish to track in storage, no matter if
it is a complex object type, can be stored and reloaded as users navigate in and out of the application.
This allows developers to extend the techniques we have already shown to nontext data.
A Window into Sharing
As alluded to in an earlier section, the ability for HTML5 Web Storage events to fire in any window
browsing the same origin has some powerful implications. It means that storage can be used to send
messages from window to window, even if they are not all using the storage object itself. This, in turn
implies that we can now share data across windows that have the same origin.
Let’s see how this works using some code samples. To listen to cross-window messages, a simple
script needs only to register a handler for storage events. Let’s assume that a page running at
http://www.example.com/storageLog.html contains the code shown in Listing 9-15 (the sample file
storageLog.html for this example is also located in the code/storage folder):
239