JS властивість Event.persisted

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

persisted — це властивість, яка вказує, чи сторінка була збережена в кеші браузера (так званий "back-forward cache") під час переходу. Це важливо для випадків, коли користувачі повертаються на попередню сторінку через кнопки "Назад" або "Вперед" у браузері. Якщо властивість persisted має значення true, це означає, що сторінка була збережена, і її повторне завантаження виконано не з нуля, а з кешу. Якщо persisted — false, сторінка завантажується повністю наново.

Коли користувач повертається на сторінку через кеш, не всі події, такі як завантаження, будуть викликані повторно. Це може вплинути на ініціалізацію деяких скриптів або поведінку сторінки. Тому програмісти можуть використовувати властивість persisted, щоб перевіряти, чи потрібно виконувати певні дії (наприклад, оновлення даних або повторну ініціалізацію компонентів) при поверненні на сторінку.

Приклад використання:

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    console.log("Сторінка завантажена з кешу.");
    // Можна оновити дані або перевірити стан.
  } else {
    console.log("Сторінка завантажена заново.");
  }
});

У наведеному прикладі прослуховується подія pageshow, яка виникає, коли сторінка відображається. Перевіряється значення властивості persisted, щоб дізнатися, чи сторінка відображена з кешу. Це допомагає, наприклад, оновити дані або відобразити коректний стан для користувача.

правити

Порада

Сторінки, які використовують складні анімації або CSS-транзиції, можуть мати проблеми при завантаженні з кешу. Важливо враховувати цю особливість і перевіряти, чи потрібно відтворювати анімацію знову після повернення користувача на сторінку.

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

Порада

Якщо ви використовуєте сторонні бібліотеки або фреймворки, що керують станом компонентів, обов'язково перевірте їхню сумісність із властивістю persisted. Деякі бібліотеки можуть не обробляти правильно кешовані сторінки, тому потрібно додатково тестувати поведінку сторінок у різних браузерах.

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

Порада

Перевіряйте роботу з кешованими сторінками не тільки на стаціонарних комп'ютерах, але й на мобільних пристроях. Часто поведінка кешування і відновлення сторінок може відрізнятися на мобільних платформах, що може викликати неочікувані проблеми.

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

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

Синтаксис

event.persisted

Переглядачі

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

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

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

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

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

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

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

Приклади

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

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    fetch('/api/get-latest-data')
      .then(response => response.json())
      .then(data => {
        console.log("Оновлені дані:", data);
        // Оновлення DOM з новими даними.
      });
  }
});

let countdown = 60;

function startCountdown() {
  let interval = setInterval(() => {
    countdown--;
    console.log(countdown);
    if (countdown === 0) {
      clearInterval(interval);
      console.log("Відлік завершено.");
    }
  }, 1000);
}

window.addEventListener('pageshow', function(event) {
  if (!event.persisted) {
    startCountdown();
  }
});