Communication between windows of one browser by means of cookies
The article will be very short, but it describes a good way to exchange data between windows in one browser.
The method will help us respond to an event that occurred in another window. For example, as VK does - when we play music in one tab, and in another we open a video or turn on another track.
The solution is cross-browser, now unfortunately there is no way to test it on a phone / tablet, but I think that everything should work.
So, the solution is simple and quite elegant - through a cookie.
I used jQuery and the jquery.cookie plugin, but all this can be implemented using native tools of js itself without a wrapper.
So, we have a “listener” for cookie changes:
Once every half a second we check the data in the “state” cookie and, if they have changed, we respond to the event, in this case we simply display the data on the screen. And also, write the current state to the lastState variable.
The second script we will change the data:
Set the current timestamp to cookie state.
Also, we can set something to cookie state_, for example, “audio.stop”, where timestamp is the current timestamp that we set to the state cookie so that the rest of the windows know how to respond to our event.
Demo on jsfiddle: listener (open) and installer (open and click on the button, then look in the previous window).
Demo 2 in 1
UPD: I’ll add that this solution is better to use for devices that do not know anything about localStorage, so that there are no disagreements and misunderstandings among readers.
The method will help us respond to an event that occurred in another window. For example, as VK does - when we play music in one tab, and in another we open a video or turn on another track.
The solution is cross-browser, now unfortunately there is no way to test it on a phone / tablet, but I think that everything should work.
So, the solution is simple and quite elegant - through a cookie.
I used jQuery and the jquery.cookie plugin, but all this can be implemented using native tools of js itself without a wrapper.
So, we have a “listener” for cookie changes:
var lastState = 0;
$(document).ready(function()
{
cookieTimer();
});
function cookieTimer()
{
var t = $.cookie('state');
if(t != lastState)
{
lastState = t;
$('#stateLog').append('New state: ' + t + '');
}
window.setTimeout(cookieTimer, 500);
}
Once every half a second we check the data in the “state” cookie and, if they have changed, we respond to the event, in this case we simply display the data on the screen. And also, write the current state to the lastState variable.
The second script we will change the data:
Set the current timestamp to cookie state.
Also, we can set something to cookie state_
Demo on jsfiddle: listener (open) and installer (open and click on the button, then look in the previous window).
Demo 2 in 1
UPD: I’ll add that this solution is better to use for devices that do not know anything about localStorage, so that there are no disagreements and misunderstandings among readers.