DOM Storage window broadcast

In the article, we will talk about an interesting DOM Storage event, which allows broadcast communication between windows of the browser of one domain that are not aware of each other.



DOM Storage (localStorage sessionStorage), in addition to the amazing ability to store information on the client, has another documented, but little-known possibility - a notification about changing / deleting the DOM Storage element for all windows open from the current domain.

The standard says that the store event is called on all windows except the current one, when there was a change in data in the store. An event can be caught on the body; it pops up on document and then on window.
storage event gives us the opportunity to communicate between windows that are not aware of each other's existence.

storage event is available on FF 3.5+ Op 10.6+ Sa 4+ Ch 8+ IE 8+ (I can be wrong)

Let's create a test case. Its essence is as follows: there is a parent window (which does not catch messages), it creates N child windows that can Broadcast some data and command the rest of the windows.

First, create event handlers for all windows

if ('v'=='\v') { // Note: IE listens on document
    document.attachEvent('onstorage', onStorage, false);
} else if (window.opera || webkit){ // Note: Opera and WebKits listens on window
    window.addEventListener('storage', onStorage, false);
} else { // Note: FF listens on document.body or document
    document.body.addEventListener('storage', onStorage, false);
}

As it turned out, all browsers behave who, for what reason, IE catches the event only on document, Opera and WebKits on window, and FF either on document.body or document (probably the documentation was poorly read during design).
The onStorage handler will either close the window or display some data.

Broadcast Function

function broadcast(cmd){
    localStorage.setItem('command', cmd);
    if (window.opera || webkit) { 
        // Note: Opera and WebKits don't fire storage event on event source window
        // Do it manually
        onStorage();
    }
}

Opera and Webkits work according to the standard, i.e. do not call storage on the current window, so we make the onStorage call manually (other developers again poorly read the documentation).

All is ready.
Source gist.github.com/840221
Example bit.ly/dVatda

Important
1. The example automatically opens 1-25 windows and your browser (Opera, IE) can block the second window. In the opera, before starting the experiment, allow all the pop-up windows "F12 - Settings - Basic - Pop-ups".
2. All windows will automatically close.
3. In IE 8, the broadcast may not reach some windows (a bug is known), so to close all the windows you will need to press the magic button a couple of times.

Where to use DOM Storage window broadcast
I could not think of special purposes of application. A couple of what happened: synchronizing the content of windows in dynamic web applications, preventing the opening of additional windows from the current domain in one browser (as the experiment showed, this works fine in opera, in fact it doesn’t work in the others).