Главная > Блог > Web-разработка > JavaScript и TypeScript >

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

08.10.2018

Теги: JavaScript • localStorage • Web-разработка • Вкладка • Событие

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

Рассмотрим пример скрипта, который синхронизирует заполнение полей формы, открытой в разных вкладках браузера:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Передача данных между вкладками браузера</title>
<script type="text/javascript" src="synch.js"></script>
</head>
<body>
    <form>
        <div>
            Имя <input type="text" name="name" id="name" value="" />
        </div>
        <div>
            Почта <input type="text" name="email" id="email" value="" />
        </div>
        <div>
            Сообщение <textarea name="message" id="message"></textarea>
        </div>
        <div>
            <input type="submit" name="submit" value="Отправить" />
        </div>
    </form>
</body>
</html>

document.addEventListener('DOMContentLoaded', function() {
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var message = document.getElementById('message');

    name.addEventListener('input', function(e) {
        localStorage.setItem(name.id, name.value);
    });
    email.addEventListener('input', function(e) {
        localStorage.setItem(email.id, email.value);
    });
    message.addEventListener('input', function(e) {
        localStorage.setItem(message.id, message.value);
    });

    window.addEventListener('storage', function(event) {
        /*
        console.log(event.key);      // имя ключа, сохраненного в localStorage
        console.log(event.oldValue); // значение ключа до изменения
        console.log(event.newValue); // значение ключа после изменения
        */
        if (event.key == name.id) {
            name.value = event.newValue;
            return;
        }
        if (event.key == email.id) {
            email.value = event.newValue;
            return;
        }
        if (event.key == message.id) {
            message.value = event.newValue;
            return;
        }
    });
});

Поиск: JavaScript • Web-разработка • localStorage • Вкладка • Событие