Las cadenas de consulta son datos estructurados, no texto para editar con concatenación ad hoc. URLSearchParams maneja la codificación, las claves repetidas y los separadores para que una actualización del filtro no dañe accidentalmente el resto de la dirección.

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

Sepa cuándo configurar y agregar difieren

  • set reemplaza todos los valores de una clave con un valor.
  • append agrega otro valor, lo cual es útil cuando un parámetro puede aparecer más de una vez.
  • getAll devuelve todos los valores; obtener devoluciones sólo el primero.

Preservar las otras partes de la URL

Construya una URL desde la ubicación actual, actualice solo los parámetros que posee su interfaz y mantenga intactos el nombre de la ruta y el hash. Evite incluir información privada, como credenciales, en una cadena de consulta, donde se puede copiar en registros y referencias.

Utilice pushState cuando un cambio deba crear un paso con el botón Atrás; use replaceState cuando solo debería actualizar la entrada del historial actual.