JS властивість Object.history

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

Window.history - це властивість об'єкта Window у JavaScript, яка надає доступ до історії сесії браузера, зокрема, до стеку історії (history stack). Ця властивість є частиною Browsing History API і дозволяє розробникам керувати навігацією та історією сторінок у межах одного сеансу браузера. Основна користь полягає у можливості програмного керування історією переходів користувача в межах одного веб-додатку, що робить взаємодію з додатком більш гнучкою та контрольованою.

Використання Window.history включає методи, які дозволяють додавати, змінювати та переміщуватися по записам історії. Наприклад, метод history.pushState() дозволяє додати запис у історію переходів, а history.back() - повернутися на одну сторінку назад, що імітує натискання кнопки "Назад" у браузері.

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

// Додавання нового запису до історії
history.pushState({page: 1}, "title 1", "?page=1");

// Повернення на один крок назад у історії
history.back();

Складніший приклад:

// Змінення поточного стану
history.replaceState({page: 2}, "title 2", "?page=2");

// Перехід на два кроки вперед у історії
history.go(2);

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

Давайте детальніше розглянемо методи:

history.pushState(state, title, [url]) - цей метод дозволяє додати запис до історії сесії без перезавантаження сторінки. Аргумент state - об'єкт, який відноситься до нового стану, title - заголовок стану (більшість браузерів це ігнорують), і url - нова URL-адреса.
history.replaceState(state, title, [url]) - замінює поточний запис у історії на новий, з аналогічними параметрами, що й у pushState.
history.back() - емулює натискання кнопки "Назад" у браузері.
history.forward() - емулює натискання кнопки "Вперед".
history.go(delta) - переміщується на кілька кроків вперед або назад у історії, в залежності від знаку і величини delta.

Важливо пам'ятати, що зміни в історії, зроблені за допомогою Window.history, не призводять до негайного перезавантаження сторінки, але вони можуть вплинути на поведінку кнопок "Назад" та "Вперед" браузера. Розробникам слід ретельно планувати використання цих методів, щоб забезпечити інтуїтивно зрозумілу та ефективну навігацію в додатку.

Порада:	Використовуйте методи `history.back()`, `history.forward()` та `history.go()` для навігації по історії перегляду. Це може бути корисно для створення кнопок "назад" та "вперед" на вашому сайті.
Порада:	Використовуйте властивість `history.length` для отримання інформації про кількість сторінок в історії перегляду. Це може бути корисно, наприклад, для визначення, чи користувач прийшов на сторінку безпосередньо або через перегляд інших сторінок.
Порада:	Будьте уважні, використовуючи `history` для зміни URL, оскільки це може вплинути на очікуваний потік навігації користувача. Наприклад, метод `history.pushState()` дозволяє додати запис до історії без перезавантаження сторінки, але його слід використовувати з обережністю.
Порада:	Для SPA, де навігація контролюється JavaScript, `history` є незамінним для управління станами URL. Це дозволяє користувачам використовувати кнопки навігації браузера без перезавантаження всього додатку.

Синтаксис

window.history

Значення

Return

Переглядачі

Переглядач
	1	1	1	3	12

Переглядач
	4.4	18	4	1

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

Приклади

У цьому прикладі ми створили додаток, який має дві кнопки: "Назад" і "Вперед". Користувач може натискати ці кнопки, і за допомогою властивості history браузера відбувається навігація між різними сторінками в історії браузера. Це демонструє, як можна використовувати властивість history для контролю навігації в додатку на JavaScript.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/zYeeBgO">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми перевіряємо, чи історія браузера має попередню сторінку за допомогою властивості length. Якщо є попередня сторінка, ми створюємо кнопку "Назад", і при кліку на неї користувач переходить на попередню сторінку в історії браузера.

// Перевіряємо, чи історія браузера має попередню сторінку
if (window.history.length > 1) {
    // Додаємо кнопку "Назад" на сторінку
    var backButton = document.createElement("button");
    backButton.textContent = "Назад";
    backButton.addEventListener("click", function() {
        // Переходимо на попередню сторінку в історії браузера
        window.history.back();
    });
    document.body.appendChild(backButton);
}

У цьому складнішому прикладі ми спершу отримуємо поточний URL. Потім створюємо кнопку "Змінити URL", і при її кліку ми генеруємо новий URL та додаємо запис до історії браузера за допомогою pushState(). Ми також слухаємо подію popstate, щоб відобразити поточний URL в консолі браузера при зміні URL без перезавантаження сторінки.

// Отримуємо поточний URL
var currentURL = window.location.href;

// Додаємо кнопку "Змінити URL"
var changeURLButton = document.createElement("button");
changeURLButton.textContent = "Змінити URL";
changeURLButton.addEventListener("click", function() {
    // Генеруємо новий URL
    var newURL = currentURL + "?new_param=123";

    // Додаємо запис до історії браузера і змінюємо URL без перезавантаження
    window.history.pushState(null, null, newURL);
});
document.body.appendChild(changeURLButton);

// Обробляємо подію зміни URL
window.addEventListener("popstate", function(event) {
    // Відобразити поточний URL в консолі
    console.log("Поточний URL: " + window.location.href);
});

JS довідник

JavaScript

Наповнення JS розділу