Всем привет и начнем. Прежде давайте разберемся для чего же предназначен объект history позволяющий работать с историей браузера.

Данный объект предназначен для перехода на предыдущие и следующие страницы в истории браузера тем самым эмулируя кнопки Back/Forward. Если кто не знает то Back/Forward - это две стрелочки в левом верхнем углу браузера вернуться к предудыщей вкладке/перейти к следующей. Обычно они становятся активными когда вы переходите на новые страницы в пределах одной вкладки.

Итак с предназначением мы разобрались теперь давайте рассмотрим свойства и методы данного объекта:

history.length;

Свойство length определяет количество ваших переходов в пределах одной вкладки.

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

history.back();

Данный метод позволяет вернуться на шаг назад.

Чтобы перейти на шаг вперед:

history.forward();

Но что если мы хотим вернуться сразу на несколько шагов назад или вперед? Спокойно, для этого мы можем воспользоваться методом go:

history.go(2);
history.go(-2);

Как вы наверное уже догадались history.go(2) - перейти на два шага вперед; history.go(-2) - на два шага назад.

Следовательно history.back() и history.worward() можно представить как history.go(-1) и history.go(1);

Мы также можем на определенном шаге добавлять данные:

history.pushState(data, description, url);

Данный метод позволяет добавлять данные в историю. Параметры data и description являются обязательными. url можно не указывать в качестве его значения автоматически подставится текущий адрес страницы.Если вы все-таки его укажите, то автоматически будете перенаправлены на указанный адрес.

data - Какие либо данные которые вы хотите сохранить на данном шаге истории.

description - описание или заголовок сохранения в истории, служит для обращения к вашим записям истории.

К примеру если вы хотите достать ваши сохраненные данные.

history.state(description);

Следует отметить что данные этот метод вернет только на шаге где вы их записали с помощью pushState.

Для изменения ранее существующих данных есть метод:

history.replaceState(data,description);

Здесь все просто. data - новые данные которые мы хотим записать; description - заголовок истории созданный нами ранее.

И напоследок хочу сказать что для отслеживания переходов по страницам в пределах одной вкладки существует специальное событие popstate:

window.addEventListener ("popstate", function (e) {
//код обработки события popstate
 });

Данное событие отслеживает переходы по истории, то есть нажатие кнопок back/forward.

На этом дорогие друзья данная статья подошла к концу. Удачи!