History API

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

DOM-объектWindow предоставляет доступ к истории текущей сессии браузера (не путать систорией браузерных расширений) через объектhistory. Он предоставляет полезные методы и свойства, которые позволяют переходить назад и вперёд по истории пользователя и манипулировать её содержимым.

Понятия и использование

Перемещение назад и вперёд по истории пользователя выполняется с помощью методовback(),forward(), иgo().

Перемещение вперёд и назад

Чтобы переместиться назад по истории:

window.history.back();

Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.Похожим образом можно переместиться вперёд (как если бы пользователь нажал на кнопку "Вперёд"):

window.history.forward();

Перемещение к определённой странице в истории

Вы можете использовать методgo() для загрузки конкретной страницы из истории сессии, определяемой её позицией относительно текущей страницы. Относительная позиция текущей страницы равняется0.

Вернуться на одну страницу назад (равноценно вызовуback()):

window.history.go(-1);

Перейти на одну страницу вперёд (равноценно вызовуforward())

window.history.go(1);

По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент2, и так далее.

Кроме того, методgo() можно использовать для обновления текущей страницы, передавая аргумент0 или вызывая его без аргументов:

// Обе следующих инструкции обновляют текущую страницуwindow.history.go(0)window.history.go()

Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойстваlength:

var numberOfEntries = window.history.length;

Интерфейсы

History: Позволяет манипулировать историей сессии браузера (то есть, страницами, посещёнными в той же закладке, что и текущая страница.

Примеры

В следующем примере свойствуonpopstate назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замены и перемещения по истории текущей вкладки браузера

window.onpopstate = function(event) {  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)}history.pushState({page: 1}, "title 1", "?page=1")history.pushState({page: 2}, "title 2", "?page=2")history.replaceState({page: 3}, "title 3", "?page=3")history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"history.back() // alerts "location: http://example.com/example.html, state: null"history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"