Les chaînes de requête sont des données structurées et non du texte à modifier avec une concaténation ad hoc. URLSearchParams gère le codage, les clés répétées et les séparateurs afin qu'une mise à jour du filtre n'endommage pas accidentellement le reste de l'adresse.

const url = new URL(window.location.href);
url.searchParams.set("category", "css & layout");
url.searchParams.delete("page");
history.replaceState(null, "", url);

Savoir quand la définition et l'ajout diffèrent

  • set remplace toutes les valeurs d'une clé par une seule valeur.
  • append ajoute une autre valeur, ce qui est utile lorsqu'un paramètre peut apparaître plusieurs fois.
  • getAll renvoie chaque valeur ; obtenir des retours uniquement le premier.

Conserver les autres parties de l'URL

Construisez une URL à partir de l'emplacement actuel, mettez à jour uniquement les paramètres que possède votre interface et conservez le nom de chemin et le hachage intacts. Évitez de placer des informations privées telles que des informations d'identification dans une chaîne de requête, où elles peuvent être copiées dans des journaux et des référents.

Utilisez pushState lorsqu'une modification doit créer une étape du bouton Retour ; utilisez replaceState lorsqu'il doit uniquement mettre à jour l'entrée actuelle de l'historique.