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-транзиції, можуть мати проблеми при завантаженні з кешу. Важливо враховувати цю особливість і перевіряти, чи потрібно відтворювати анімацію знову після повернення користувача на сторінку. |
| Порада: | Якщо ви використовуєте сторонні бібліотеки або фреймворки, що керують станом компонентів, обов'язково перевірте їхню сумісність із властивістю |
| Порада: | Перевіряйте роботу з кешованими сторінками не тільки на стаціонарних комп'ютерах, але й на мобільних пристроях. Часто поведінка кешування і відновлення сторінок може відрізнятися на мобільних платформах, що може викликати неочікувані проблеми. |
Синтаксис
event.persistedЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
4 |
11 |
5 |
15 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
14 |
4 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад демонструє сценарій, коли дані можуть змінюватися поза межами поточного сеансу користувача. Використання persisted дозволяє перевірити, чи потрібно оновлювати контент.
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();
}
});