Is it possible to have event-based communication between browser windows? [duplicate]

Answer 1

Localstorage has events that you can subscribe to to syncronize other pages.

Note: If you update a key's value in window A, the event will not be triggered in window A. It will be triggered in windows B & C.

Here is a demo: http://html5demos.com/storage-events

Open this page in several tabs. change the value on the input and see it reflected in divs.

Here is the code The Javascript:

var dataInput = document.getElementById('data'),
output = document.getElementById('fromEvent');

// handle updates to the storage-event-test  key in other windows
addEvent(window, 'storage', function (event) {
  if (event.key == 'storage-event-test') {
    output.innerHTML = event.newValue;
  }
});

// Update the storage-event-test key when the value on the input is changed
addEvent(dataInput, 'keyup', function () {
  localStorage.setItem('storage-event-test', this.value);
});

Markup:

      
Your test data:  (this is only echoed on other windows)
      
Waiting for data via storage event...

The HTML 5 spec discusses all the information passed in the event:

[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute DOMString? oldValue;
  readonly attribute DOMString? newValue;
  readonly attribute DOMString url;
  readonly attribute Storage? storageArea;
};

dictionary StorageEventInit : EventInit {
  DOMString key;
  DOMString? oldValue;
  DOMString? newValue;
  DOMString url;
  Storage? storageArea;
};

From: http://www.w3.org/TR/webstorage/#the-storage-event

Using this event, you can make other pages react to when a specific key in local storage is updated.