javascript - Is it possible to have event-based communication between browser windows? -

javascript - Is it possible to have event-based communication between browser windows? -

is possible have event-based communication between browser tabs/windows?

i known (at to the lowest degree theoretically) possible using local storage. please provide little illustration of code doing that? send event in 1 tab, , receive in another.

are there libraries/jquery-plugins that?

(i know can communicate between windows/tabs of same browser using cookies; not need; prefer event-based approach, don't want recheck state of cookies every millisecond).

localstorage has events can subscribe syncronize other pages.

note: if update key's value in window a, event not triggered in window a. triggered in windows b & c.

here demo: http://html5demos.com/storage-events

open page in several tabs. alter value on input , see reflected in divs.

here code javascript:

var datainput = document.getelementbyid('data'), output = document.getelementbyid('fromevent'); // handle updates storage-event-test key in other windows addevent(window, 'storage', function (event) { if (event.key == 'storage-event-test') { output.innerhtml = event.newvalue; } }); // update storage-event-test key when value on input changed addevent(datainput, 'keyup', function () { localstorage.setitem('storage-event-test', this.value); });

markup:

<div> <p>your test data: <input type="text" name="data" value="" placeholder="change me" id="data" /> <small>(this echoed on <em>other</em> windows)</small></p> <p id="fromevent">waiting info via <code>storage</code> event...</p> </div>

the html 5 spec discusses info passed in 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 event, can create other pages react when specific key in local storage updated.

javascript jquery local-storage