Объект History

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

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

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

­
• в URL теперь отображается реальный адрес страницы, пользователи могут спокойно копировать ссылку на страницу из адресной строки браузера и распространять ее;
­
• отказ от конструкции #! при использовании Ajax позволяет не беспокоиться о потерянных для индексации поисковыми системами ссылках;
­
• ссылки просто становятся чище и красивее.

Свойства

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