Storing Data in Web Storage - HTML5 Programming for ASP.NET Developers - page 188

The JSON object used in this example contains the Name value Tom and the Age value 50. The resulting
alert box displays these values to the user.

Session Storage and Local Storage Events
The sessionStorage and localStorage objects support a storage event that is raised whenever the
underlying storage area changes. You should be aware of two things while dealing with this event. First, the
storage event is raised on the window object. Second, for most browsers except IE, the storage event is fired
on every browser instance (or tab) except the one that changed the storage object. In IE, the storage event
is raised for all instances (or tabs) of the browser. So, if Example1.aspx is loaded in three tabs Tab1 , Tab2 ,
and Tab3 , and Tab1 changes the web storage, Tab2 and Tab3 receive the storage event. In IE, Tab2 and Tab3
as well as Tab1 receive the storage event.
The storage event handler receives event information as a StorageEvent object. The properties of
StorageEvent are shown in Table 7-2.

Table 7-2. Event Parameters of the storage Event

Parameter Description

key Represents the key of an item that is being added to the storage

oldValue Old value of the key being changed (if an existing key is being changed)

newValue New value being assigned to a key

url URL of the page that is accessing the storage area

storageArea

Reference to the storage area: localStorage or sessionStorage

Just to check how the storage event works, modify the example shown in Figure 7-1 as shown in
Listing 7-5.

Listing 7-5. Handling the storage Event
$(document).ready(function () {
...
window.addEventListener('storage', OnStorage, false);
...
});

function OnStorage (event) {
alert("Storage event fired for key : " + event.key + " in page " + event.url);
alert("Old Value - New Value : " + event.oldValue + " - " + event.newValue);
}

Notice how the storage event handler is attached using the window object's addEventListener()
method. The OnStorage() function uses various properties of the event parameter and displays them in a
message box. To test the storage event, open the same web form in two Firefox tabs. Switch to the first tab,
and add a key. You should see an alert box on the other tab as shown in Figure 7-4.
As you can see, adding a key to the first tab informs the user that the storage event has been raised for
the second tab and the key name is key1 .