Получение предыдущего URL в JavaScript без cookies и якорей

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

Для того чтобы узнать адрес предыдущей страницы, вы можете использовать метод document.referrer:

console.log(document.referrer); // Выводит адрес предыдущей страницы, если таковой имеется.

Если запрос на предыдущую страницу не был осуществлен, вернется пустая строка. Это может произойти, например, из-за настроек конфиденциальности.

Понимание значения document.referrer

Видимо, использование document.referrer выглядит простым. Однако его значение не всегда отражает реальность. Если переход был выполнен между разными сайтами, если адрес был введён вручную, или если страница была добавлена в закладки, то адрес реферера не будет записан. В пределах одного сайта этот метод отлично справляется с определением адреса предыдущей страницы.

Как преодолеть ограничения document.referrer

Методы получения адреса предыдущей страницы

Если document.referrer не подходит, можно использовать следующие инструменты:

1. Параметры URL: в запросе можно указать информацию о предыдущей странице.
2. Cookies: перед тем как покинуть страницу, сохраните её адрес в файлах cookies, чтобы впоследствии использовать его как адрес предыдущей страницы.
3. Сессионное хранилище: с помощью sessionStorage и localStorage удобно управлять состояниями.
4. Сессии на сервере: сохраните информацию о предыдущей странице в сессии пользователя на сервере.

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

Использование объекта window.history

API истории браузера (history.pushState, history.back(), history.forward(), history.go()) даёт пользователю возможность управлять историей браузера, но не предоставляет прямого доступа к адресу предыдущей страницы.

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

Получение адреса предыдущей страницы в JavaScript можно представить как отслеживание своих собственных шагов:

Вы находитесь здесь: [🏡 Дом] → [🌳 Лес] → [🏕️ Лагерь]
Хотите вернуться? Просто следуйте своим шагам.

Ваш путь может быть сохранён следующим образом:

document.referrer; // Ваш путь, зафиксированный в URL. 👣

Если следы шагов сохранились:

Предыдущее местоположение: [🌳 Лес]

Если следы шагов не обнаружены:

Предыдущее местоположение: Не обнаружено 😶
// Возможно, вы заблудились или это ваша первая точка отсчёта.

Главное помнить, что document.referrer показывает адрес предыдущей страницы, только если таковой существует.

Особенности и последствия

Конфиденциальность

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

Безопасность

Чтобы избежать уязвимостей XSS, важно "фильтровать" данные URL перед их использованием или отображением.

Известные ограничения и несоответствия

Навигация внутри фрейма

При работе с iframe или frameset, document.referrer может вести себя не предсказуемо, так как каждый фрейм хранит свою собственную информацию о реферере.

Различия в браузерах

Разные браузеры и их настройки могут обрабатывать информацию о реферере по-разному, поэтому важно проводить кросс-браузерное тестирование и учитывать настройки конфиденциальности пользователей.

Использование HTML5 History API

Использование pushState в SPA

В одностраничных приложениях часто используют history.pushState и window.history.state для перехода между состояниями страниц без перезагрузки, а также для сохранения адреса предыдущей страницы в объекте состояния:

// Даже URL-ам иногда нужна машина времени! 🕰️
history.pushState({ prevUrl: window.location.href }, null, newUrl);

Совместимость

Проверяйте поддержку pushState и связанных функций в разных браузерах, особенно в старых версиях.

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

1. Как получить адрес предыдущей страницы в JavaScript? – Stack Overflow – вопросы и ответы сообщества разработчиков.
2. Document: referrer property – Web APIs | MDN – подробное руководство по использованию document.referrer.
3. Window History Object – информация о History API на сайте W3Schools.
4. Использование HTML5 History API | CSS-Tricks – глубокое погружение в HTML5 History API.
5. security – Когда HTTP_REFERER будет пустым – Stack Overflow – обсуждение надёжности document.referrer.