JS об'єкт PageTransition
Загальний опис
PageTransition Events – це події, які виникають при переходах між сторінками або перезавантаженні сторінки. До них відносяться pageshow та pagehide, які можуть бути корисними для відстеження моментів, коли сторінка завантажується або залишає активну область перегляду. Подія pageshow спрацьовує, коли сторінка завантажується або коли користувач повертається до неї за допомогою кнопки "Назад" або "Вперед" у браузері. Ця подія корисна для відновлення стану сторінки, збереженого при її вивантаженні. pagehide спрацьовує при закритті або перезавантаженні сторінки, а також коли користувач переходить на іншу сторінку.
Події PageTransition мають властивість 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-додатків з підтримкою навігації браузера варто обробляти обидві події, |
Синтаксис
window.addEventListener("pageshow", function(event) {
// Код, що виконується при завантаженні сторінки
});
window.addEventListener("pagehide", function(event) {
// Код, що виконується при вивантаженні сторінки
});Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
4 |
1.5 |
5 |
15 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
4 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад зберігає дані форми при виході зі сторінки (подія pagehide) і відновлює їх при поверненні до сторінки з кешу (подія pageshow), що зручно, якщо користувач випадково покинув сторінку.
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];
}
}
}
});Тут відстежується стан користувацьких налаштувань: при виході стан зберігається в localStorage, а при поверненні з кешу (з подією pageshow) завантажується назад. Це корисно для збереження персоналізованих налаштувань між сеансами.
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));
}
});Методи
persisted()- Властивість подій `pageshow` та `pagehide`, яка визначає, чи сторінка була завантажена з кешу (значення `true`), що часто відбувається при використанні кнопок навігації браузера.