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 API, завжди перевіряйте підтримку, особливо якщо ваша аудиторія включає старіші версії браузерів.

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

Нотатка

Надмірне додавання записів в історію може спричинити незручності для користувача. Наприклад, якщо ви додаєте новий запис при кожній зміні фільтра, користувачу може знадобитися багато кліків, щоб повернутися на попередню сторінку.

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

Нотатка

Якщо ви активно використовуєте History для додавання записів, зверніть увагу, щоб не створити "цикл", коли користувач намагається повернутися назад, але завжди перенаправляється на ту ж сторінку.

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

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

Синтаксис

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

методи

властивості

Переглядачі

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

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

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

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

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

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

Переглядач
	0.10.0	1.0

Приклади

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

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

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}`);
}