Общение между окнами одного браузера средствами cookie

Статья будет очень короткой, но описывает неплохой способ обмена данными между окнами в одном браузере.

Способ поможет нам среагировать на событие, которое произошло в другом окне. Например, как это делает VK — когда в одной вкладке у нас играет музыка, а в другой мы открываем видео или включаем другой трек.


Решение кросс-браузерное, сейчас к сожалению нет возможности проверить его на телефоне/планшете, но думаю, что всё должно работать.

Итак, решение простое и достаточно изящное — через cookie.

Я использовал jQuery и плагин jquery.cookie, но это всё можно реализовать и нативными средствами самого js без обёртки.

Итак, у нас есть «слушалка» изменений cookie:

var lastState = 0;

$(document).ready(function()
{
    cookieTimer();
});

function cookieTimer()
{
    var t = $.cookie('state');
    if(t != lastState)
    {
        lastState = t;
        $('#stateLog').append('<div>New state: ' + t + '</div>');
    }
    window.setTimeout(cookieTimer, 500);
}

Мы раз в пол секунды проверяем данные в куке «state» и, если они изменились — реагируем на событие, в данном случае мы просто выводим данные на экран. А также, записываем текущее состояние в переменную lastState.

Вторым скриптом мы будем менять данные:

<button onclick="$.cookie('state', new Date().getTime());">Set new state</button>

Устанавливаем текущий timestamp в куку state.

Также, мы можем установить что-либо в куку state_<timestamp>, например «audio.stop», где timestamp — текущий timestamp, который мы установили в куку state, чтобы остальные окна знали как реагировать на наше событие.

Демо на jsfiddle: слушалка (открываем) и устанавливалка (открываем и нажимаем на кнопку, затем смотрим в предыдущее окно).

Демо 2 в 1

UPD: добавлю, что данное решение лучше использовать для устройств, которые ничего не знают о localStorage, чтобы не было разногласий и недопонимания среди читателей.