History API

Перемещение назад и вперёд по истории пользователя выполняется с помощью методов 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}"

• window.history
• window.onpopstate

• Working with the History API