Как работать с 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 и перерисовать интерфейс приложения в соответствии с загружаемым разделом.