Объект History

В объекте History хранятся список всех URL страниц, которые были посещены пользователем в данном окне.

History API представляет собой одно из интересных новшеств HTML 5. Благодаря ему появляется возможность навигации по истории одного таба браузера без перезагрузки страницы, при этом браузер корректно отрабатывает функции "назад" и "вперед".

Это дает замечательные возможности при использовании History API совместно с Ajax. Теперь нет необходимости использовать традиционную конструкцию #!, можно просто заменить URL целиком. Благодаря этому мы получаем следующие преимущества:

Свойства

lengthВозвращает количество URL, которые хранятся в объекте.
stateВозвращает текущую запись из стека истории.

Методы

back()Загружает предыдущий URL в списке хранимых URL.
forward()Загружает следующий URL в списке хранимых URL.
go()Переходит на указанный URL в списке.
pushState()Метод добавляет запись в стек истории сеанса.
replaceState()Метод аналогичный предыдущему, однако вместо добавления новой записи в стек, заменяется текущая запись.
popstateОбработчик события вызываемый при навигации по истории.

back()

С помощью метода back Вы можете перейти на предыдущую URL в списке посещенных страниц.

Синтаксис

history.back()

Комментарии

Действие этого метода аналогично действую стрелки назад в браузере и history.go(-1).

Пример

history.back()

forward()

С помощью метода forward Вы можете перейти на следующую URL в списке посещенных страниц.

Синтаксис

history.forward()

Комментарии

Действие этого метода аналогично действую стрелки вперед в браузере и history.go(1).

Пример

history.forward()

go()

С помощью метода go Вы можете перейти на указанную URL в списке посещенных страниц.

Синтаксис

history.go(число)

Параметры

число
Указывает смещение относительно текущей URL в списке. Данный параметр может принимать отрицательные значения. Например -4 значит перейти на 4-ю с конца URL списка, 3 значит перейти на 3-ю впереди от текущей URL в списке. Вместо числа также можно использовать имя посещенной URL в списке (например https://www.mail.ru).

Пример

history.go(-3);

pushState()

Метод pushState добавляет запись в стек истории сеанса.

Синтаксис

history.pushState(data,title,url)

Параметры

data
Данные записи в стеке истории. Эти данные могут использоваться в обработчике события popstate. Если никаких дополнительных данных передавать не требуется — указывается null
title
Заголовок страницы, можно указать null
url
Адрес страницы, может быть как относительным так и абсолютным.

replaceState()

Метод replaceState заменяет текущуя запись в стек истории сеанса.

Синтаксис

history.replaceState(data,title,url)

Параметры

data
Данные записи в стеке истории. Эти данные могут использоваться в обработчике события popstate. Если никаких дополнительных данных передавать не требуется — указывается null
title
Заголовок страницы, можно указать null
url
Адрес страницы, может быть как относительным так и абсолютным.

Комментарии

Поведение методов replaceState и pushState можно отобразить следующим образом. Представим, что в нашем стеке истории есть 2 записи (помечены 1 и 2), и мы должны добавить третью (помечена 3). При использовании pushState запись добавляется в «стопку» записей над предыдущими, в то время как при использовании replaceState заменяется последняя запись (самая верхняя в «стопке»). Вся документация по этому API тут.

popstate

Обработчик события вызываемый при навигации по истории. Т.е. отрабатывает при нажатии на кнопки вперед/назад в браузере (в JavaScript- addEventListener) или при вызове методов back(), forward(), go(n).

В следующем примере свойству 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()
history.back()
history.go(2)

length

Свойство length возвращает количество URL, которые хранятся в объекте History.

Синтаксис

history.length

Комментарии

В список посещенных URL попадают только URL, посещенные в ДАННОМ окне браузера

Пример

// Количество URL которые хранятся в History
alert(history.length);

state

Свойство state возвращает текущую запись из стека истории.

Синтаксис

history.state

 

Справочник JavaScript