История API

API истории предоставляет доступ к истории сеанса браузера (не следует путать с историей WebExtensions) через глобальный объект history. Он предоставляет полезные методы и свойства, которые позволяют перемещаться вперед и назад по истории пользователя и изменять содержимое стека истории.

Перемещение назад и вперед по истории пользователя выполняется с помощью методов back(), forward() и go().

Чтобы переместиться назад в истории:

history.back();

Это действует точно так же, как если бы пользователь нажал на кнопку Назад в строке инструментов браузера.

Аналогично, вы можете переместиться вперед (как если бы пользователь нажал кнопку Вперед):

history.forward();

Вы можете использовать метод go() для загрузки конкретной страницы из истории сеанса, определенной ее относительным положением к текущей странице. (Относительное положение текущей страницы 0.)

Чтобы перейти на предыдущую страницу (что эквивалентно вызову back()):

history.go(-1);

Чтобы перейти вперёд на одну страницу, как при вызове forward():

history.go(1);

Аналогично, вы можете перейти вперёд на 2 страницы, передав 2, и так далее.

Ещё одно применение метода go() — обновление текущей страницы, передав 0, или вызвав его без аргумента:

// The following statements
// both have the effect of
// refreshing the page
history.go(0);
history.go();

Вы можете определить количество страниц в стеке истории, посмотрев значение свойства length:

const numberOfEntries = history.length;

History

Позволяет управлять историей сеанса браузера (то есть страницами, посещёнными в вкладке или фрейме, в котором загружена текущая страница).

PopStateEvent

Интерфейс события popstate.

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

window.addEventListener("popstate", (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}"

• history глобальный объект
• popstate событие