JS об'єкт History

Об'єкт History

Об'єкт History є частиною Web API і представляє сессійну історію навігації користувача на веб-сайті. Завдяки цьому об'єкту можна програмно переміщуватися по історії сторінок браузера, а також додавати нові записи до історії.

Основні властивості та методи

Властивість length вказує на кількість сторінок у сессійній історії навігації.

let totalPages = history.length;
console.log(`В історії `{totalPages} сторінок.`);

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

Метод back() дозволяє перевести користувача на попередню сторінку в історії, якщо така існує.

function goBack() {
    history.back();
}

Використовуючи кнопку на веб-сторінці, яка викликає функцію goBack(), користувач може легко повернутися на попередню сторінку.

Якщо користувач вже використовував метод back() і перейшов на попередню сторінку, то метод forward() дозволить повернутися до наступної сторінки в історії.

function goForward() {
    history.forward();
}

Ця функція буде корисною, наприклад, для кнопки "Вперед" на вашому сайті.

Робота з історією: додавання та модифікація записів

Давайте розглянемо, як активно взаємодіяти з історією браузера, додаючи, змінюючи або слідкуючи за змінами записів. Ці можливості особливо корисні для односторінкових застосунків (Single Page Applications), де зміни контенту сторінки відбуваються без перезавантаження сторінки.

Метод pushState() додає запис до історії браузера без перезавантаження сторінки. Це дозволяє зберігати історію навігації користувача всередині одного застосунку.

history.pushState({id: 'page2'}, 'Page 2', '/page2.html');

Виконуючи цей код, ми додали запис до історії, який вказує на URL /page2.html. При цьому реального переходу на цю сторінку не відбувається. Замість цього в історії браузера з'являється новий запис, і користувач може використовувати кнопки "Назад" та "Вперед" для навігації.

Іноді потрібно змінити інформацію в поточному записі історії, замість додавання нового. Для цього існує метод replaceState().

history.replaceState({id: 'page3'}, 'Page 3', '/page3.html');

Якщо користувач знаходиться на URL /page2.html, цей метод замінить поточний запис на /page3.html, але при цьому користувач фізично залишиться на сторінці /page2.html.

Подія popstate:

Ця подія є ключовою для слідкування за змінами в історії браузера. Коли активний запис історії змінюється (через кнопки "Назад", "Вперед" або програмно через back() і forward()), викликається подія popstate.

window.addEventListener('popstate', function(event) {
    if (event.state && event.state.id) {
        console.log(`Перехід до сторінки з ID: `{event.state.id}`);
    }
});

Тут ми слідкуємо за змінами в історії. Коли користувач перемикається між записами історії, ми аналізуємо об'єкт стану і виводимо ID поточної сторінки.

Обмеження і особливості:

Працюючи з методами pushState() та replaceState(), важливо пам'ятати про обмеження. Браузери мають ліміт на кількість записів, які можна додати в історію за короткий час. Це робиться для того, щоб веб-сторінки не могли зловживати історією браузера. Тому рекомендується використовувати ці методи розумно та обережно.

Синтаксис

history.back();
history.forward();
history.go(value);

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

window.addEventListener('popstate', function(event) {
  if (event.state && event.state.id) {
    loadPageContent(event.state.id);
  }
});

function updateViewMode(mode) {
  // Зміна режиму відображення
  changeMode(mode);
  // Заміна поточного URL без додавання нового запису в історію
  history.replaceState({mode: mode}, `Mode ${mode}`, `/mode/${mode}`);
}

function navigateToPage(pageId) {
  // Зміна вмісту сторінки
  loadPageContent(pageId);
  // Додавання запису в історію
  history.pushState({id: pageId}, `Page ${pageId}`, `/page${pageId}.html`);
}

Методи

back()

Повертає користувача на одну сторінку назад у історії браузера.

forward()

Дозволяє переміщуватися вперед у історії перегляду браузера.

go()

Переміщує користувача на вказану кількість сторінок вперед або назад у історії браузера.

Властивості

length

Показує кількість елементів у стеку історії браузера.