Обмен данными между вкладками браузера (без участия сервера) | Синхронизация вкладок
Привет! Синхронизация данных между вкладками браузера — задача, с которой рано или поздно сталкиваются многие разработчики. Будь то передача данных, смена темы, одновременный выход из аккаунта пользователя, уведомления о событиях или обновление состояния в реальном времени. Для реализации подобного поведения важно выбрать правильный инструмент. В этом видео мы разберем три подхода для обмена данными между вкладками браузера, на которых открыт один и тот же сайт: 1. Web Storage API — простой и удобный способ, который использует событие "storage" для обработки изменения данных в хранилище браузера; 2. SharedWorker — более мощный инструмент, позволяющий организовать общую точку взаимодействия между вкладками через отдельный поток выполнения (по типу отдельного единого координатора/сервиса); 3. BroadcastChannel API — современный способ обмена сообщениями между вкладками без избыточной сложности. Разберем, как работают эти методы, их плюсы, минусы и типичные сценарии применения. Поехали! P. S.: Прошу прощения за "цоканья" в звуке начиная с 5:37 по 6:45. Не обратила внимания на бьющиеся об микрофон серёжки при записи. На постпродакшене убрала деффекты по максимуму как смогла. Надеюсь это не испортит общее впечатление от результата моей работы! 🤞🏻 Мой телеграм-канал: https://t.me/katerina_profrontend 00:00:00 - Вступление 00:00:56 - Web Storage API 00:04:50 - SharedWorker 00:09:30 - Broadcast Channel API 00:12:10 - Итоги Любая информация, представленная в этом видео, принадлежат мне и не отражают позицию моего работодателя или каких-либо организаций, с которыми я связана. Весь материал, показанный в видео, был создан мной лично в свободное от работы время на моем собственном ноутбуке и используются исключительно для демонстрационных целей. Всё показанное в ролике не имеет никакого отношения к интеллектуальной собственности моего работодателя или других связанных со мной организаций. #frontend #javascript #javascripttips #junior #фронтенд #обучение #frontendmentor #broadcast #frontenddevelopment
Привет! Синхронизация данных между вкладками браузера — задача, с которой рано или поздно сталкиваются многие разработчики. Будь то передача данных, смена темы, одновременный выход из аккаунта пользователя, уведомления о событиях или обновление состояния в реальном времени. Для реализации подобного поведения важно выбрать правильный инструмент. В этом видео мы разберем три подхода для обмена данными между вкладками браузера, на которых открыт один и тот же сайт: 1. Web Storage API — простой и удобный способ, который использует событие "storage" для обработки изменения данных в хранилище браузера; 2. SharedWorker — более мощный инструмент, позволяющий организовать общую точку взаимодействия между вкладками через отдельный поток выполнения (по типу отдельного единого координатора/сервиса); 3. BroadcastChannel API — современный способ обмена сообщениями между вкладками без избыточной сложности. Разберем, как работают эти методы, их плюсы, минусы и типичные сценарии применения. Поехали! P. S.: Прошу прощения за "цоканья" в звуке начиная с 5:37 по 6:45. Не обратила внимания на бьющиеся об микрофон серёжки при записи. На постпродакшене убрала деффекты по максимуму как смогла. Надеюсь это не испортит общее впечатление от результата моей работы! 🤞🏻 Мой телеграм-канал: https://t.me/katerina_profrontend 00:00:00 - Вступление 00:00:56 - Web Storage API 00:04:50 - SharedWorker 00:09:30 - Broadcast Channel API 00:12:10 - Итоги Любая информация, представленная в этом видео, принадлежат мне и не отражают позицию моего работодателя или каких-либо организаций, с которыми я связана. Весь материал, показанный в видео, был создан мной лично в свободное от работы время на моем собственном ноутбуке и используются исключительно для демонстрационных целей. Всё показанное в ролике не имеет никакого отношения к интеллектуальной собственности моего работодателя или других связанных со мной организаций. #frontend #javascript #javascripttips #junior #фронтенд #обучение #frontendmentor #broadcast #frontenddevelopment