Добавление параметра в URL без обновления страницы: pushState

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

Присвоение нового параметра к URL без обновления страницы осуществляется с использованием кода:

history.pushState(null, '', `${location.href}&newParam=value`);

Данный кусок кода позволяет активировать функцию history.pushState(), которая внесет newParam=value в текущий URL.

Если вы стремитесь к более элегантному подходу, используйте объекты URL и URLSearchParams. Они существенно упрощают работу с параметрами:

const url = new URL(window.location);
url.searchParams.append('newParam', 'value');
window.history.pushState({}, '', url);

Таким образом, newParam будет вставлен как параметр запроса, обеспечивая автоматическое кодирование и согласованность структуры URL.

Усовершенствованное управление URL

Используя window.location и API URL, мы можем тонко редактировать URL, разделяя его на протокол, хост и путь, чтобы аккуратно вставить параметры.

Бесшовные обновления с помощью replaceState

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

window.history.replaceState(null, null, '?newParam=value');

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

Кодирование параметров: безопасность в первую очередь

Необходимо обязательно кодировать ключи и значения параметров, если они содержат символы, создающие угрозу для URL:

const paramKey = encodeURIComponent('a bit naughty param&name');
const paramValue = encodeURIComponent('value with spaces, or worse');
history.pushState(null, '', `${location.href}?${paramKey}=${paramValue}`);

Таким образом, вы обеспечиваете соответствие структуры URL стандартам.

Применение индивидуального подхода с помощью сложного обновления

Если searchParams не отвечает всем вашим требованиям, вы можете прибегнуть к непосредственному управлению строками в сочетании с pushState():

let url = new URL(window.location);
let newUrl = `${url.protocol}//${url.host}${url.pathname}?${fancyUrlConcoctionFunction()}`;
window.history.pushState(null, '', newUrl);

Это дает вам возможность внедрить вашу собственную логику для проверки, замены и добавления параметров.

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

Процесс добавления параметра в URL можно представить как прицепление вагона к поезду в движении, не останавливая его ход:

Текущий поезд (🚂): [Локомотив, 🚃 Вагон A, 🚃 Вагон B]

Добавляем параметр: Новый Вагон (🔗 Param) прицеплен к поезду

До: 🚂🚃🚃  // Поезд (URL) движется как обычно
После: 🚂🚃🚃🔗🚃  // Параметр (новый вагон) добавлен безоблачно

Поезд (URL) продолжает движение без отклонения от заданного ритма, включая нового пассажира (параметр).

Группирование параметров

Для удобства добавления нескольких параметров одновременно используйте метод $.param() из jQuery:

let params = { first: 'value1', second: 'value2' };
let queryString = $.param(params);
history.pushState(null, '', `${location.href}?${queryString}`);

Таким образом формируется правильный формат и кодировка строки запроса.

Устранение проблем с "?"

Чтобы правильно добавлять параметры, начинающиеся с вопросительного знака, уважайте уже имеющиеся параметры:

function updateUrlParameter(param, value) {
  const url = new URL(window.location);
  url.searchParams.set(param, value);
  window.history.pushState(null, '', url);
}

Данная функция добавляет или обновляет параметры, сохраняя чистоту URL.

Большая картина

Для интерактивных интерфейсов важно поддерживать актуальность URL, соответствующую текущему состоянию. Методы pushState() и replaceState() могут привязываться к действиям пользователя, таким как нажатие кнопок, применение фильтров, поиск, создавая интерактивное пространство в приложении.

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

1. Использование History API – Веб API | MDN — подробное рассмотрение манипулирования историей браузера.
2. Применение HTML5 History API | CSS-Tricks — обучающее руководство по pushState.
3. History: метод pushState() – Веб API | MDN — справочник по pushState().
4. Получение параметров URL с помощью JavaScript — SitePoint — управление параметрами URL на чистом JavaScript.
5. JavaScript Window Location | w3schools — разъяснение объекта location в JavaScript Window.