Пример кода для реализации связи между страницами с помощью событий хранилища

Мы все знаем, что для запуска window.onstorage должны быть выполнены следующие два условия:

• Сохраняем (обновляем) хранилище через localStorage.setItem или sessionStorage.setItem
• При сохранении (обновлении) этого хранилища его новое значение должно отличаться от предыдущего значения.

Проще говоря, второе условие выше: либо инициализация хранилища, поскольку хранилище не существует, его значение равно нулю, либо это обновление существующего хранилища;

Пример:

 // Инициализируем Storagewindow.localStorage.setItem('a', 123); // Регистрируем событие onstorage window.onstorage = (e) => { console.log(e);}; // Обновляем Storagewindow.localStorage.setItem(' а', 123);

Последняя строка кода выше не запускает событие onstorage, поскольку значение a не изменилось, оно равно 123 до и после, поэтому браузер определяет, что это обновление недействительно.

Поскольку событие onstorage инициируется браузером, если мы откроем несколько страниц под одним и тем же доменным именем и выполним метод window.localStorage.setItem на любой из них (мы также должны убедиться, что второй элемент, упомянутый в начале статьи, условие выполняется), то если другие страницы прослушивают событие onstorage, обратные вызовы событий onstorage на этих страницах будут выполнены.

Пример:

 // http://www.example.com/a.html<script>// Регистрация события onstorage window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/b.html<script>// Регистрация события onstorage window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/c.html<script>// Запустить событие onstorage window.localStorage.setItem('a', new Date().getTime());</script>

Пока страница c гарантированно открывается после страниц a и b (даже если три страницы находятся в разных окнах браузера, вам необходимо различать разницу между окном и вкладкой), тогда события onstorage на страницах a и b будут активированы.

Теперь, когда мы знаем, как использовать события хранилища для обеспечения связи между страницами, какую пользу нам принесет эта связь?

Фактически, нам нужно только знать, какая операция обновления хранилища вызвала событие onstorage. Как же нам это узнать? Обратный вызов события onstorage, как и другие функции обратного вызова события, также получает параметр объекта события. В этом объекте есть три полезных свойства.

• key Имя ключа инициализируемого или обновляемого хранилища.
• oldValue — это значение до инициализации или обновления хранилища.
• newValue — значение после инициализации или обновления хранилища.

Объединив эти 3 ключевых атрибута, мы можем добиться синхронизации данных между страницами.

Наконец, позвольте мне упомянуть разницу между localStorage и sessionStorage.

Данные, хранящиеся в localStorage, не имеют срока действия, и данные, хранящиеся в sessionStorage, будут удалены после завершения сеанса страницы.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.