DOM Storage window broadcast

The article will discuss an interesting DOM Storage event, which allows you to perform broadcasts between the windows of a single domain browser unaware of the existence of each other.



DOM Storage (localStorage sessionStorage), in addition to the tremendous ability to store information on the client, has another documented, but little-known option — notification of the change / deletion of 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 the data in the storage has changed. The event can be caught on the body; it pops up on the document and then on the window.
storage event gives us the opportunity to communicate between windows that are unaware of the existence of each other.
')
storage event available on FF 3.5+ Op 10.6+ Sa 4+ Ch 8+ IE 8+ (I could be wrong)

Create a test case. Its essence is as follows: there is a parent window (which does not catch messages), it creates N child windows, which 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 in what a lot of IE catches the event only on the document, Opera and WebCits on the window, and FF either on document.body or on the document (they probably didn't read the documentation well when designing).
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 (the other developers did not read the documentation well again).

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

Important
1. The sample 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, Broadcast may not reach some windows (a bug is known), so in order to close all windows you will need to press the magic button a couple of times.

Where can I use the DOM Storage window broadcast
I couldn’t think of any special purposes. A couple of what happened: synchronization of window content in dynamic web applications, the prohibition of opening additional windows from the current domain in one browser (as the experiment showed, this works fine in the opera, in others it does not work).