[ITEM 2] QUESTION: Как работать с history API?

Робота з History API в JavaScript дозволяє веб-розробникам програмно керувати історією сеансу браузера, тобто вмістом стека історії поточної вкладки. Це критично важливо для створення сучасних односторінкових додатків, відомих як SPA, де переходи між розділами відбуваються без повної перезагрузки сторінки, але при цьому користувач очікує звичної поведінки інтерфейсу з працюючими кнопками вперед і назад у браузері.

Головним методом для зміни історії без перезагрузки є history.pushState(state, title, url). Цей метод приймає три аргументи: об'єкт стану state, який містить дані, прив'язані до цього стану, заголовок сторінки title, який у більшості сучасних браузерів ігнорується, і нову URL-адресу, яка відображається в адресній рядку браузера. Якщо вам потрібно не додати новий запис, а змінити поточний, використовується метод history.replaceState(), який перезаписує актуальний стан і адресу.

Для навігації історією в коді передбачені методи history.back(), які повертають користувача на одну сторінку назад, history.forward(), що переміщують вперед, а також універсальний метод history.go(delta), де числовий аргумент вказує, на скільки кроків вперед чи назад потрібно зміститися в стеку. Коли користувач натискає кнопки навігації в браузері або викликаються методи go, back, forward, на об'єкті window спрацьовує подія popstate. В обробнику цієї події розробник може отримати актуальний стан через event.state і перемалювати інтерфейс додатка відповідно до розділу, що завантажується.