Передача данных между вкладками браузера

Весьма распространенная ситуация, когда у пользователя в браузере открыты несколько страниц одного сайта в разных вкладках. Соответственно, может возникнуть ситуация, когда необходимо синхронизировать данные между этими страницами.
Существует несколько способов сделать это, например:

• COMET, AJAX-SetInterval, WebSocket API (с использованием сервера)
• Запись в cookie и последующим чтением с определенным интервалом на всех страницах
• Манипуляции с iframe
• Shared object через Flash

и, наконец, еще один метод, основанный на LocalStorage.
Такой способ с недавних пор используется в одной популярной социальной сети: когда в одной вкладе проигрывается музыкальный трек, то открытие видео-файла в другой — ставит аудио-запись на паузу.
О реализации этого способа и хотелось бы рассказать.

К преимуществам данного метода можно отнести:

• Простота использования
• Наличие event handler (то есть не будет необходимости по таймеру проверять произошли ли какие-то изменения)

Из недостатков: не все браузеры поддерживают local storage.

Реализация

Для начала выполнить проверку поддержки браузера:

function supportsStorage() {
	try {
		return 'localStorage' in window && window['localStorage'] !== null;
	} catch (e) {
		return false;
	}
}

Данные в локальном хранилище представляются в виде пары «имя»:«значение».

Запись

localStorage.setItem("name","value");

Чтение

localStorage.getItem("name");

Отслеживание изменений в локальном хранилище

window.addEventListener('storage', storageEventHandler, false);

function storageEventHandler(e){
	console.log(e.key); //имя
	console.log(e.oldValue); //предыдущее значение
	console.log(e.newValue); //новое значение
}

Основная часть готова. Осталось только добавить события, при которых будут записываться данные в хранилище и все готово!

var range = document.getElementById("range");
range.addEventListener("change",onInputChange,false);
function onInputChange() {
	localStorage.setItem(range.id,range.value);
}

Пример реализации можно посмотреть здесь.
Открываем в нескольких вкладках — двигаем ползунок — получаем одинаковый вид во всех окнах.