как добавлять и обновлять параметры url с помощью javascript

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
22 декабря 2024

Для начала, давайте извлечем текущие параметры из URL. Для этого мы можем использовать объект URL, который позволяет легко работать с различными частями URL.

const url = new URL(window.location.href);

Для добавления параметра можно использовать метод searchParams.append():

// Добавим параметр 'newParam' с значением 'newValue'
url.searchParams.append('newParam', 'newValue');

// После добавления выводим модифицированный URL
console.log(url.toString());

Если вы хотите обновить параметр, вы можете использовать метод searchParams.set():

// Обновим параметр 'existingParam' с новым значением 'updatedValue'
url.searchParams.set('existingParam', 'updatedValue');

// После обновления выводим модифицированный URL
console.log(url.toString());

Если параметра с таким именем не существует, метод set автоматически создаст его.

Если вам нужно удалить параметр, вы можете использовать метод searchParams.delete():

// Удалим параметр 'paramToRemove'
url.searchParams.delete('paramToRemove');

// После удаления выводим модифицированный URL
console.log(url.toString());

После того как вы изменили параметры URL, вы можете обновить адрес в адресной строке браузера, используя метод history.pushState() или history.replaceState():

// Изменим URL без перезагрузки страницы
history.pushState({}, '', url.toString());

Метод pushState создает новую запись в истории браузера, а replaceState заменяет текущую запись.

0 0
Познакомьтесь с основами JavaScript бесплатно