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

Форма записи

Window.history представляет собой объект JavaScript, который можно использовать для работы с историей браузера. Он предоставляет ряд методов, которые можно использовать для перемещения по истории и управления ею.

Перемещение по истории браузера:

window.history.back(); // перемещение на одну страницу назад в истории браузера
window.history.forward(); // перемещение на одну страницу вперед в истории браузера
window.history.go(-2); // перемещение на две страницы назад в истории браузера

Управление историей браузера:

window.history.pushState(state, title, url); // добавление новой записи в истории браузера
window.history.replaceState(state, title, url); // замена текущей записи в истории браузера

Описание работы

Window.history может быть использован для управления навигацией в браузере, как в классических веб-приложениях, так и в одностраничных приложениях (SPA). В классической навигации история браузера используется для перемещения по страницам, а в SPA история браузера используется для создания виртуальной навигации между различными состояниями приложения.

Пример:

const button = document.querySelector('button');
button.addEventListener('click', () => {
  window.history.pushState({ page: 1 }, '', '/page1');
  // изменение URL-адреса и добавление новой записи в истории браузера
});

window.addEventListener('popstate', event => {
  // обработка события изменения истории браузера
  console.log(event.state); // { page: 1 }
});

Навигация в одностраничных приложениях

Window.history может быть особенно полезен для навигации в одностраничных приложениях, где различные состояния приложения могут быть отображены в одном и том же окне браузера. В SPA история браузера может использоваться для создания виртуальных страниц, что позволяет пользователям перемещаться между различными состояниями приложения с помощью кнопок "Назад" и "Вперед" в браузере.

Пример:

const button1 = document.querySelector('#page1');
const button2 = document.querySelector('#page2');

button1.addEventListener('click', () => {
  window.history.pushState({ page: 1 }, '', '/page1');
  // добавление новой записи в истории браузера
});

button2.addEventListener('click', () => {
  window.history.pushState({ page: 2 }, '', '/page2');
  // добавление новой записи в истории браузера
});

window.addEventListener('popstate', event => {
  // обработка события изменения истории браузера
  if (event.state.page === 1) {
    // отображение состояния страницы 1
  } else if (event.state.page === 2) {
    // отображение состояния страницы 2
  }
});

Заключение

Window.history предоставляет удобный способ управления историей браузера в пределах одной сессии. Он предоставляет методы для перемещения по истории браузера и управления ею, и может использоваться для создания виртуальных страниц в одностраничных приложениях.