Vidog 27 янв 2013 в 20:29

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

2 мин

28K

JavaScript*

+33

Комментарии 48

BuriK666 27 янв 2013 в 20:49

Круто!

-10

friday 27 янв 2013 в 20:54

Костыли-костылики:-) Есть же postMessage.

Vidog 27 янв 2013 в 20:57

Если не ошибаюсь, то postMessage появился только во времена HTML5? Данный способ, думаю, будет работать даже в нецкейпе :)

Aliance 28 янв 2013 в 11:08

Ибо такой же старый, как и «Нецкейп».

dobeer 28 янв 2013 в 13:05

У меня в проекте используется postMessage для общения между разными доменами, но в рамках одного окна, через ифрейм, делал я это еще до HTML5, 3 года назад. Если мне память не изменяет то браузеры начали поддерживать postMessage с версий: Firefox 3.5, Opera 10, Safari 4.0/Chrome 3.0+, Internet Explorer 7.0+. В IE8, интерфейс postMessage работает только с ифреймами. Он не работает между табами и окнами, в более высоких версиях все нормально.

ertaquo 27 янв 2013 в 20:54

Имхо, гораздо удобнее использовать localStorage (или sessionStorage) и использовать событие storage. Разве что они поддерживаются меньшим числом браузеров…

+30

Vidog 27 янв 2013 в 20:56

В том то и дело, что поддержка этих методов пока что не слишком распространена.

WEBIVAN 27 янв 2013 в 21:08

Оно не поддерживается IE<8, FF<3.5 O<10.5
Т.е. фактически он поддерживается в браузерах примерно 98% пользователей. Стоит ли ради 2% городить такое с куки?

+18

Vidog 27 янв 2013 в 21:16

Ну, решение можно использовать как альтернативу для браузеров, которые ничего не знают о localStorage (if никто не отменял) :)

Serator 28 янв 2013 в 00:13

Про localStorage и вКонтакте уже давно на хабре писали, ибо вот. Search-то тоже никто не отменял.

spmbt 28 янв 2013 в 15:01

Будет ли интересна уважаемому сообществу статья "Установка цвета сообщений браузера с помощью тегов «FONT»"?

dobeer 28 янв 2013 в 16:38

Как альтернатива css свойства color, конечно пишите… гы

kamiram 28 янв 2013 в 18:40

а разве не deprecated(тег font) уже?

-1

ozonar 28 янв 2013 в 05:02

У меня разрыв шаблона. Не поддерживается 98% пользователей, но судя по комментарию ниже, вКонтакте пользуется именно этим способом. Им-то точно не пофиг на 98%.

Где правда?

-2

Defff 28 янв 2013 в 05:14

Данный скрипт к шаблону мало отношения имеет, вероятно вы либо скрипт не загнали в файл(либо не одели в теги, либо библиотеку jQuery не поставили.

-1

HabraSvarog 28 янв 2013 в 06:41

Сарказм?
Разрыв шаблона — неожиданное действие, имеющее целью перелом ума собеседника. «X порвал шаблон Y» означает, что X совершил действие, которое Y от него не ожидал. Фраза широко использовалась в федо и окрестностях. (с) Луркоморье

HabraSvarog 28 янв 2013 в 06:48

Ты ошибся в чтении, указанно, что поддерживается у 98% пользователей, а у двух как раз нет. Всегда статистику браузеров здесь: www.w3schools.com/browsers/browsers_stats.asp можно посмотреть

ozonar 28 янв 2013 в 08:17

Охты, действительно. Плохо не спать. =(

Alex7Kom 28 янв 2013 в 06:50

Написано поддерживается 98%.
developer.mozilla.org/ru/docs/DOM/Storage#Browser_compatibility

Snowly 28 янв 2013 в 07:48

IE6+, FF2+, O10+,CH5+

github.com/marcuswestin/store.js

RubaXa 27 янв 2013 в 21:17

Ну так и сделали бы fallback в cookie, в зависимости от поддержки.
В своё время делал общение между вкладками при помощи LocalConnection (Flash) c fallback в cookie.

omfg 27 янв 2013 в 20:56

LocalStorage поддерживает уже большинство браузеров (ie8+) и проверять cookie через setTimeout совсем не изящное решение, как вы написали. При изменение localStorage срабатывает событие, которое можно слышать в любой вкладке. Посмотрите как работает soundcloud.

Leksat 27 янв 2013 в 20:58

Пример не работает (Chrome, Ubuntu). Добавьте {path: '/' }.

BuriK666 27 янв 2013 в 21:05

хмм, в Chromium работает

Vidog 27 янв 2013 в 21:19

Проверьте пример «2 в 1», у меня через раз раз тоже работает первый пример. Возможно, jsfiddle хитрит :)

WEBIVAN 27 янв 2013 в 21:09

И кстати, да VK использует как раз localStorage, а не cookies

Vidog 27 янв 2013 в 21:15

Я и не говорю о том, что VK использует cookie, я просто предложил альтернативное решение, поддерживаемое браузерами, которые не знают ничего о localStorage.

Glook 27 янв 2013 в 21:17

Opera 12.12
Ничего не происходит…

НЛО прилетело и опубликовало эту надпись здесь

ecroFeG 27 янв 2013 в 21:58

«Не стреляйте в пианиста! Он играет как умеет.»
Эта статейка вполне может быть полезна просто для понимания идеи, как передавать данные внутри браузера. А cookie и localStorage — всего лишь 2 разных «контейнера».

+17

Weageoo 27 янв 2013 в 22:09

Наконец-то это кто-то сказал.

+13

Defff 27 янв 2013 в 22:24

Решение часто применяется, единственно что все куки идут на сервер, в отличие от storage

Vidog 27 янв 2013 в 22:42

Ну есть и небольшой плюс — эти же куки можно поставить со стороны сервера.

WEBIVAN 27 янв 2013 в 22:55

Непонятно, зачем со стороны сервера ставить информацию для общения с вкладками. Но если очень хочется, то что мешает со стороны сервера отдать

?

Defff 27 янв 2013 в 22:14

Корректней использовать setInterval, меньше вызовов и «мусора» от сохранений в документе.
Есть кроссбраузерное LocalStorage => github.com/devote/localstorage

Snowly 28 янв 2013 в 08:00

Есть более интересный вариант github.com/marcuswestin/store.js

imater 27 янв 2013 в 22:28

А появились ли пути обойти ограничение в 5 мегабайт для LocalStorage? Или может есть функции превращающие LocalStorage в IndexedDB или другое, без особых ограничений в локальное хранение данных?

WEBIVAN 27 янв 2013 в 22:37

IE8/9 Только localstorage, хотя по документации лимит в них 10мегабайт.
Остальные браузеры поддерживают либо WebSQL(Opera, Chrome, Safari, Android, iOS) либо IndexedDB(FF,IE10, Последний desctop Chome)

imater 27 янв 2013 в 22:59

WebSQL, кажется тоже 5 мегабайт ограничение по умолчанию. Мне интересно, есть ли плагины упрощающие работу с WebSQL и IndexedDB до уровня LocalStorage, чтобы можно было просто сохранить объект и потом прочитать, без плясок с бубном. Т.е. эмулятор LocalStorage на современных базах данных.

Defff 27 янв 2013 в 23:15

А появились ли пути обойти ограничение в 5 мегабайт

В принципе можно использовать iframe c нескольких своих доменов, в каждом своё LocalStorage, данные на TOP.document отдавать через postMessage (или window.name с ченчем страницы фрейма)

bolk 28 янв 2013 в 00:02

Свежаааак идея. Жду статьи «использование text-decoration для подчёркивания текста», «выделение жирным при помощи тега <B>» и другие столь же незатёрные темы.

bO_oblik 28 янв 2013 в 09:44

Я уже 7 лет в веб-программировании и первый раз вижу такую фигню.

-3

bolk 28 янв 2013 в 10:15

Вы 7 лет в веб-программировании и не знали, что куки одинаковы во всех окнах (зануда mode on: если не заданы особые ограничения на URL, например, а в окнах разные урлы)?

Nordvind 29 янв 2013 в 13:21

Использование table для верстки страницы :)

Assorium 28 янв 2013 в 09:09

Поправьте меня пожалуйста, если я не прав.
Этот метод работает только в двух случаях.
1. Когда браузер динамично выставляет куки, т.е. и в открытых окнах тоже.
2. Когда дополнительно идут запросы на сервер и сервер параллельно выставит в остальные окна кукисы.

Т.к. ни первое ни второе не происходит, то примеры в двух окнах само собой не работают. Chrome.

ganjar 9 дек 2015 в 22:28

Куки одни для браузера а не для открытой страницы (за исключением кукловодских модернизаций), дополнительные запросы на сервер не нужны.
Чисто для примера www.bodo.ua — как раз таким образом работает синхронизация корзины. Добавляем первое впечатление в корзину, возвращаемся на главную. Открываем новую вкладку сайта и там добавляем еще одно, возвращаемся на первую — вуаля.