JS об'єкт PageTransitionEvent

Загальний опис

PageTransitionEvent – це події, які виникають при переходах між сторінками або перезавантаженні сторінки. До них відносяться pageshow та pagehide, які можуть бути корисними для відстеження моментів, коли сторінка завантажується або залишає активну область перегляду. Подія pageshow спрацьовує, коли сторінка завантажується або коли користувач повертається до неї за допомогою кнопки "Назад" або "Вперед" у браузері. Ця подія корисна для відновлення стану сторінки, збереженого при її вивантаженні. pagehide спрацьовує при закритті або перезавантаженні сторінки, а також коли користувач переходить на іншу сторінку.

Події PageTransitionEvent мають властивість persisted, яка вказує, чи була сторінка збережена в кеші. Якщо persisted дорівнює true, це означає, що сторінка повертається з "безпечного кешу", і всі дані можна швидко відновити, що особливо важливо для SPA-додатків або сайтів з інтенсивною взаємодією. Наприклад, для завантаження з кешу можна використати перевірку:

window.addEventListener("pageshow", function(event) {
  if (event.persisted) {
    console.log("Сторінка відновлена з кешу");
  }
});

Використання pagehide може допомогти оптимізувати збереження стану, коли користувач покидає сторінку, особливо при обробці даних у великих застосунках. Наприклад, під час закриття сторінки можна відправити незбережені зміни на сервер або зберегти стан в localStorage:

window.addEventListener("pagehide", function(event) {
  if (!event.persisted) {
    localStorage.setItem("pageState", JSON.stringify(state));
  }
});

правити

Порада

При створенні SPA-додатків з підтримкою навігації браузера варто обробляти обидві події, pageshow та pagehide, для відстеження кешованих переходів. Це дозволяє динамічно керувати станом та оновленням контенту при навігації.

автор: Bond правити

Порада

Не використовуйте beforeunload як заміну для pagehide, оскільки beforeunload не підтримує властивість persisted і може обмежувати взаємодію з користувачем через попередження про закриття.

автор: Bond правити

Порада

Події pageshow і pagehide можуть зручно взаємодіяти з кешуванням HTTP та Service Workers, покращуючи швидкість завантаження та ефективність кешування на клієнтському боці.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

window.addEventListener("pageshow", function(event) {
  // Код, що виконується при завантаженні сторінки
});

window.addEventListener("pagehide", function(event) {
  // Код, що виконується при вивантаженні сторінки
});

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	4	1.5	5	15	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	4

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<input type="text" value="текст для прикладу">

let formData = {};

document.querySelectorAll("input").forEach(input => {
  input.addEventListener("input", (e) => {
    formData[e.target.name] = e.target.value;
  });
});

window.addEventListener("pagehide", function() {
  sessionStorage.setItem("formData", JSON.stringify(formData));
});

window.addEventListener("pageshow", function(event) {
  if (event.persisted) {
    const savedData = JSON.parse(sessionStorage.getItem("formData"));
    if (savedData) {
      for (let key in savedData) {
        document.querySelector(`[name=${key}]`).value = savedData[key];
      }
    }
  }
});

let state = { userPreferences: {} };

window.addEventListener("pageshow", function(event) {
  if (event.persisted) {
    const savedState = JSON.parse(localStorage.getItem("pageState"));
    if (savedState) {
      state = savedState;
      console.log("Сторінка відновлена з кешу:", state);
    }
  }
});

window.addEventListener("pagehide", function() {
  if (!event.persisted) {
    localStorage.setItem("pageState", JSON.stringify(state));
  }
});