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

Работа с параметрами URL в JavaScript включает в себя несколько основных действий: добавление, обновление и удаление этих параметров. Рассмотрим, как можно осуществить эти действия с помощью встроенных методов JavaScript.

Извлечение текущих параметров URL

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

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

1. Добавление параметров в URL

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

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

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

2. Обновление (или замена) параметров в URL

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

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

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

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

3. Удаление параметров из URL

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

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

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

4. Применение изменений к URL

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

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

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

Пример полной функции для управления параметрами URL

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

function updateUrlParameter(param, value) {
    const url = new URL(window.location.href);

    // Если значение null, удалим параметр
    if (value === null) {
        url.searchParams.delete(param);
    } else {
        // Если значение передано, обновим или добавим параметр
        url.searchParams.set(param, value);
    }

    // Обновим адрес
    history.pushState({}, '', url.toString());
}

// Примеры использования:
updateUrlParameter('newParam', 'newValue');  // Добавит параметр
updateUrlParameter('existingParam', 'newValue');  // Обновит параметр
updateUrlParameter('paramToRemove', null);  // Удалит параметр

Зачем это нужно?

Управление параметрами URL может быть полезным в следующих ситуациях:

• Фильтрация и поиск: Изменение параметров для фильтрации данных на странице, например, при создании интерфейсов с фильтрами.
• Состояние приложения: В одностраничных приложениях (SPA) изменение состояния URL позволяет пользователю делиться ссылками с конкретным состоянием приложения.
• Аналитика: Добавление UTM-меток для отслеживания источников трафика.

Заключение

Работа с параметрами URL в JavaScript — мощный инструмент для улучшения пользовательского опыта и управления состоянием вашего веб-приложения. Используйте объект URL и методы searchParams для удобного и безопасного манипулирования параметрами URL.