History API

History API — это встроенный интерфейс браузера, позволяющий управлять историей навигации веб-приложений без полной перезагрузки страницы. Он является частью спецификации HTML5 и широко используется в современных одностраничных приложениях (SPA), включая проекты на библиотеке Haunted, где реактивные компоненты требуют синхронизации состояния с URL.

Основные методы History API

1. history.pushState(state, title, url) Добавляет новое состояние в историю браузера, изменяя URL без перезагрузки страницы.

  • state — объект с произвольными данными, который будет доступен при событии popstate.
  • title — пока игнорируется большинством браузеров, но может использоваться для SEO или внутренней логики.
  • url — новый URL, который будет отображен в адресной строке.

Пример использования:

history.pushState({ page: 2 }, "Страница 2", "/page2");

После выполнения этого кода браузер покажет /page2, но контент страницы изменится только при ручном управлении через JS.

2. history.replaceState(state, title, url) Аналогичен pushState, но заменяет текущее состояние, не создавая новую запись в истории.

Пример:

history.replaceState({ page: 1 }, "Страница 1", "/page1");

Используется для корректировки URL или состояния без добавления нового шага в историю.

3. Навигация через методы back, forward и go

  • history.back() — переход к предыдущей записи в истории.
  • history.forward() — переход к следующей записи.
  • history.go(n) — переход на n шагов вперед или назад.

Пример:

history.go(-1); // вернуться на одну страницу назад

Событие popstate

Основной инструмент для отслеживания изменений истории. Срабатывает при навигации с помощью кнопок «Назад»/«Вперед» браузера или вызова history.go().

window.addEventListener('popstate', (event) => {
  console.log("Новое состояние:", event.state);
});
  • event.state содержит объект состояния, переданный в pushState или replaceState.
  • Событие не срабатывает при прямой загрузке страницы.

Интеграция с Haunted

В Haunted компоненты строятся на реактивных хуках. History API можно использовать для синхронизации состояния с URL через useEffect или пользовательские хуки.

Пример пользовательского хука для Haunted:

import { useState, useEffect } from 'haunted';

function useHistoryState(defaultState, urlPath) {
  const [state, setState] = useState(defaultState);

  useEffect(() => {
    const handlePopState = (event) => {
      setState(event.state || defaultState);
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  const pushState = (newState, newUrl) => {
    history.pushState(newState, '', newUrl);
    setState(newState);
  };

  return [state, pushState];
}

Использование в компоненте Haunted:

import { html, component } from 'haunted';

function Page() {
  const [pageState, setPageState] = useHistoryState({ page: 1 }, '/page1');

  return html`
    <div>
      <p>Текущая страница: ${pageState.page}</p>
      <button @click=${() => setPageState({ page: 2 }, '/page2')}>Перейти на страницу 2</button>
    </div>
  `;
}

customElements.define('my-page', component(Page));

Особенности работы History API

  • Сохранение состояния: Любой объект может быть сохранён в истории, но он должен быть сериализуемым (JSON). Ссылки на DOM или функции сохранять нельзя.
  • Совместимость: API поддерживается всеми современными браузерами.
  • SEO и обновление URL: Несмотря на изменение URL, серверная часть должна уметь корректно обрабатывать эти пути при прямом обращении.
  • Взаимодействие с Haunted: Любые изменения состояния через pushState или replaceState можно привязывать к реактивным хукам, обеспечивая синхронизацию интерфейса и URL без перезагрузки.

Рекомендации по использованию

  • Использовать pushState для добавления новых страниц и состояний, replaceState для корректировки текущего состояния без создания нового шага истории.
  • Обрабатывать popstate для восстановления состояния интерфейса при навигации назад или вперёд.
  • Хранить только необходимые данные в объекте состояния, избегая больших структур.
  • В Haunted интегрировать с хуками состояния, чтобы UI автоматически реагировал на изменения истории.

History API является ключевым инструментом для SPA и компонентов Haunted, обеспечивая полноценное управление навигацией без полной перезагрузки страницы и позволяя создавать динамичные, отзывчивые интерфейсы.

Оглавление