Ajouter un paramètre à l'URL courante avec JavaScript

Publié le 27/02/2019 • Mis à jour le 27/02/2019

English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧

Voici une manière propre d'y arriver en utilisant l'objet JavaScript URL. Dans ce snippet : 1) On récupère l'URL courante du navigateur. 2) On créé un objet URL avec l'url que nous venons de récupérer. 3) Nous lui ajoutons et lui assignons des paramètres GET. 4) Enfin, nous changons l'URL du navigateur avec ce que nous venons de construire et ce sans recharger la page. Et voilà! 😉

PS : Veuillez noter que si vous rafraichissez la page, the paramètre id sera de nouveau ajouté à l'URL mais pas le paramètre foo car nous utilisons pour ce dernier la fonction set qui l'empêche donc d'être ajouté plusieurs fois. (la plupart du temps nous aurons donc besoin de cette fonction set)


<script>
    let urlStr = window.location.href;
    let urlObj = new URL(urlStr);
    urlObj.searchParams.append('foo', 'bar');
    urlObj.searchParams.append('id', '17');
    urlObj.searchParams.set('foo', 'bar2');
    history.replaceState({}, "", urlObj.toString());
</script>

 Plus sur Stackoverflow