Сравнение JavaScript методов replaceState и pushState

Быстрый ответ

history.pushState() создает новую запись в истории браузера, позволяя возвращаться к предыдущим страницам с использованием кнопки "назад". Между тем, history.replaceState() заменяет текущую запись, таким образом предотвращая возможность возврата к предыдущему URL посредством кнопки "назад".

Пример применения pushState:

history.pushState(null, "", "page2.html"); // Таким образом в истории появляется новая страница.

Пример применения replaceState:

history.replaceState(null, "", "page3.html"); // В результате текущая страница заменяется новой.

Оба метода меняют URL в адресной строке браузера без перезагрузки страницы, но только pushState сохраняет историю просмотров.

Сценарии использования

pushState() отлично подходит в случаях, когда необходимо сохранить историю переходов по сайту. Это особенно актуально для одностраничных приложений, где создается иллюзия перехода по различным страницам без их фактической загрузки.

replaceState() пригодится, когда изменения URL не должны фиксироваться в истории. Например, при обновлении поисковых запросов на веб-сайтах, этот метод гарантирует, что история навигации не будет загрязнена незначительными изменениями.

Будьте внимательны

replaceState() может улучшить интерфейс, но следует помнить, что неожиданные изменения в истории могут сбить с толку пользователей, если нажатие кнопки "назад" приведет их не туда, куда они ожидали.

Подробнее об этом расскажет наш спикер на видео

Элементы риска при навигации

Неправильное использование pushState() и replaceState() может ухудшить пользовательский опыт. Злоупотребление методом pushState() усложнит навигацию, а replaceState() может сбить с толку пользователя, когда он потеряет возможность вернуться на предыдущую страницу.

Визуализация

Можно представить историю браузера в виде колоды карт: вы можете убрать верхнюю карту и заменить ее новой с помощью replaceState, или же можно положить новую карту сверху при использовании pushState:

Ваша текущая колода 🃏: [Карта 1, Карта 2, Карта 3]

При использовании replaceState():

🔄 Вы заменили Карту 3 на Карту 3'.
Ваша колода 🃏: [Карта 1, Карта 2, 🆕 Карта 3']

// Прощай, Карта 3. Внесение новые страниц в историю – это не про тебя!

При использовании pushState():

➕ Вы добавили Карту 4 после Карты 3.
Ваша колода 🃏: [Карта 1, Карта 2, Карта 3, 🆕 Карта 4]

// Игра продолжается, и ваша история продолжает увеличиваться!

Усовершенствование пользовательского опыта

Разумное использование pushState() и replaceState() может улучшить пользовательский опыт. Например, на сайте с информацией о погоде replaceState() позволяет обновлять URL, не перегружая историю просмотров, в то время как использование pushState() привело бы к перегруженности истории за счет большого количества сохраненных состояний.

Powering UP SPAs

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

Создание понятного навигационного потока Комбинированное применение replaceState() для малых изменений и pushState() для существенных изменений делает навигацию интуитивно понятной и предсказуемой.

Полезные материалы

1. API Истории – Web APIs | MDN
2. Использование HTML5 History API | CSS-Tricks
3. История JavaScript
4. React Router: Работа с кнопкой "назад"
5. Понимание API Истории JavaScript