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

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