Peter Lubbers - Pro HTML 5 Programming

240
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
Listing 9-15. Cross-Window Communication Using Storage
// display records of new storage events
function displayStorageEvent(e) {
var incomingRow = document.createElement('div');
document.getElementById("container").appendChild(incomingRow);
}
var logged = "key:" + e.key + ", newValue:" + e.newValue + ", oldValue:" +
e.oldValue + ", url:" + e.url + ", storageArea:" + e.storageArea;
incomingRow.innerHTML = logged;
// add listeners on storage events
window.addEventListener("storage", displayStorageEvent, true);
After registering an event listener for the storage event type, this window will receive notification of
storage changes in any pages. For example, if a browser window viewing
http://www.example.com/browser-test.html that is currently browsing the same origin sets or changes a
new storage value, the storageLog.html page will receive a notification. Therefore, to send a message to a
receiving window, the sending window need only modify a storage object, and its old and new values
will be sent as part of the notification. For example, if a storage value is updated using
localStorage.setItem(), then the displayStorageEvent() handler in the storageLog.html page hosted at
the same origin will receive an event. By carefully coordinating event names and values, the two pages
can now communicate, a feat which has been difficult to accomplish before. Figure 9-12 shows the
storageLog.html page in action, simply logging storage events it receives.
Figure 9-12. The storageLog.html page logging storage eventsSummary