Peter Lubbers - Pro HTML 5 Programming

Download from Wow! eBook
222
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
As you can see, the name storage is used to indicate interest in storage events. Any time a Storage
event—either sessionStorage or localStorage—for that origin is raised any registered event listener will
receive the storage event as the specified event handler. The storage event itself takes the form shown in
Listing 9-3.
Listing 9-3. The StorageEvent Interface
interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute any oldValue;
readonly attribute any newValue;
readonly attribute DOMString url;
readonly attribute Storage storageArea;
};
The StorageEvent object will be the first object passed to the event handler, and it contains all the
information necessary to understand the nature of the storage change.
• The key attribute contains the key value that was updated or removed in the
storage.
• The oldValue contains the previous value corresponding to the key before it was
updated, and the newValue contains the value after the change. If the value was
newly added, the oldValue will be null, and if the value has been removed, the
newValue will be null.
• The url will point to the origin where the storage event occurred.
• Finally, the storageArea provides a convenient reference to the sessionStorage or
localStorage where the value was changed. This gives the handler an easy way to
query the storage for current values or make changes based on other storage
changes.
Listing 9-4 shows a simple event handler, which will raise an alert dialog with the contents of any
storage event fired on the page’s origin.
Listing 9-4. Event Handler that Displays Content of a Storage Event
// display the contents of a storage event
function displayStorageEvent(e) {
var logged = "key:" + e.key + ", newValue:" + e.newValue + ", oldValue:" +
e.oldValue +", url:" + e.url + ", storageArea:" + e.storageArea;
alert(logged);
}
// add a storage event listener for this origin
window.addEventListener("storage", displayStorageEvent, true);