Back to questions
Simbirsoft
Middle
4
Как синхронизировать две вкладки браузера через localStorage? Расскажи про событие storage.
Companies where asked
Answer from AI
sobes.tech AI
Для синхронизации двух вкладок браузера через localStorage используется событие storage. Оно срабатывает в других вкладках, когда в одной вкладке происходит изменение данных в localStorage.
Пример использования:
// В обеих вкладках добавляем обработчик события
window.addEventListener('storage', (event) => {
if (event.key === 'syncKey') {
console.log('Данные изменились:', event.newValue);
// Здесь можно обновить состояние или выполнить нужные действия
}
});
// В одной из вкладок обновляем localStorage
localStorage.setItem('syncKey', JSON.stringify({ time: Date.now() }));
Особенности:
- Событие
storageне срабатывает в той же вкладке, где произошло изменение, только в остальных. - Можно использовать для передачи сообщений между вкладками, обновления UI или синхронизации состояния.
- Значение
event.key— ключ, который изменился. event.newValueиevent.oldValue— новые и старые значения.
Таким образом, storage — простой и эффективный способ межвкладочной коммуникации без использования серверов или WebSocket.