Javascript; communication between tabs/windows with same origin
SharedWorker is the WHATWG/ HTML5 spec for a common process that can communicate amongst tabs.
Besides the upcoming SharedWorker, you can also use cross-document messaging, which is much more widely supported. In this scenario, there must a be a main window that is responsible for opening all other windows with window.open
. The child windows can then use postMessage on their window.opener
.
If using flash is an option for you, there is also the much older LocalConnection virtually supported on any client with flash installed (example code).
Other fallbacks methods:
postMessage plugin for jQuery with window.location.href fallback for older browsers
cookie-based solution for non-instant communication
The BroadcastChannel standard allows to do this. Right now it is implemented in Firefox and Chrome (caniuse, mdn):
// tab 1
var ch = new BroadcastChannel('test');
ch.postMessage('some data');
// tab 2
var ch = new BroadcastChannel('test');
ch.addEventListener('message', function (e) {
console.log('Message:', e.data);
});
I'm sticking to the shared local data solution mentioned in the question using localStorage
. It seems to be the best solution in terms of reliability, performance, and browser compatibility.
localStorage
is implemented in all modern browsers.
The storage
event fires when other tabs makes changes to localStorage
. This is quite handy for communication purposes.
References can be found here:
Webstorage
Webstorage - storage event