API истории

API истории - это способ, которым браузеры позволяют вам взаимодействовать с адресной строкой и историей навигации.

Вступление

API истории позволяет вамвзаимодействовать с историей браузера,запускать методы навигации браузераиизменить содержимое адресной строки.

Это особенно полезно в сочетании с современными одностраничными приложениями, в которых вы никогда не запрашиваете на стороне сервера новые страницы, а вместо этого страница всегда одна и та же: изменяется только внутреннее содержимое.

Асовременное приложение JavaScriptработа в браузере, который не взаимодействует с History API явно или на уровне фреймворка, будет неудобна для пользователя, посколькукнопки назад и вперед ломаются.

Кроме того, при навигации по приложениювид меняется, а адресная строка - нет.

А такжекнопка перезагрузки ломается: перезагрузка страницы, поскольку нет прямых ссылок, заставит браузер показывать другую страницу

API истории был представлен в HTML5 и теперьподдерживается всеми современными браузерами. IE поддерживает его с версии 10, и если вам нужно поддерживать IE9 и старше, используйтеБиблиотека History.js.

Доступ к History API

API истории доступен наwindowобъект, поэтому вы можете называть его так:window.historyили жеhistory, посколькуwindowэто глобальный объект.

The History object

Начнем с самого простого, что вы можете сделать с помощью History API.

Вернуться на предыдущую страницу:

history.back()

это переходит к предыдущей записи в истории сеанса. Вы можете перейти на следующую страницу, используя

history.forward()

Это точно так же, как при использовании кнопок браузера «назад» и «вперед».

go()позволяет перемещаться назад или вперед на несколько уровней вглубь. Например

history.go(-1) //equivalent to history.back()
history.go(-2) //equivalent to calling history.back() twice
history.go(1) //equivalent to history.forward()
history.go(3) //equivalent to calling history.forward() 3 times

Чтобы узнать, сколько записей в истории, вы можете позвонить

history.length

Добавить запись в историю

С помощьюpushState()вы можете программно создать новую запись в истории. Вы передаете 3 параметра.

Первый - это объект, который может содержать что угодно (однако существует ограничение на размер, и объект должен быть сериализуемым).

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

Третий параметр - это URL-адрес, связанный с новым состоянием. Обратите внимание, что URL-адрес должен принадлежать тому же домену происхождения текущего URL-адреса.

const state = { name: 'Flavio' }
history.pushState(state, '', '/user')

Вызов этого не приведет к изменению содержимого страницы и не вызовет никаких действий браузера, таких как изменениеwindow.locationбы.

Изменить записи истории

ПокаpushState()позволяет добавить новое состояние в историю,replaceState()позволяет редактировать текущее состояние истории.

history.pushState({}, '', '/posts')
const state = { post: 'first' }
history.pushState(state, '', '/post/first')
const state = { post: 'second' }
history.replaceState(state, '', '/post/second')

Если вы сейчас позвоните

history.back()

браузер переходит прямо к/posts, поскольку/post/firstбылзамененык/post/second

Доступ к текущему состоянию записи в истории

Доступ к собственности

history.state

возвращает объект текущего состояния (первый параметр, переданный вpushStateили жеreplaceState).

Вonpopstateмероприятие

Это мероприятие называетсяwindowкаждый раз, когда состояние активной истории изменяется с текущим состоянием в качестве параметра обратного вызова:

window.onpopstate = event => {
  console.log(event.state)
}

будет регистрировать новый объект состояния (первый параметр, переданный вpushStateили жеreplaceState) каждый раз, когда вы звонитеhistory.back(),history.forward()или жеhistory.go().

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру: