CHAPTER 11  USING THE STORAGE APIS

Listing 11-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 11-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);

Exploring Web Storage

Since Web Storage is very similar in function to cookies, it is not too surprising that the most advanced browsers are treating them in a very similar manner. Values that are stored into localStorage or sessionStorage can be browsed similar to cookies in the latest browsers, as shown in Figure 11-5.

Figure 11-5. Storage values in Google Chrome’s Resources Panel

This interface also grants users the ability to remove storage values as desired and easily see what values a given web site is recording while they visit the pages. Not surprisingly, the Safari browser has a similar, unified display for cookies and storage, as it is based on the same underlying WebKit rendering engine as Chrome is. Figure 11-6 shows the Safari Resources panel.

273

CHAPTER 11  USING THE STORAGE APIS

Figure 11-6. Storage values in Safari’s Resources panel

Like the other browsers, the Opera Dragonfly storage display allows users to not only browse and delete storage values but also create them as shown in Figure 11-7.

Figure 11-7. Storage values in Opera’s Storage panel

274