Ler e atualizar parâmetros da URL com JavaScript

Código

const url = new URL(window.location.href);
const categoria = url.searchParams.get('categoria') || 'todas';

function atualizarCategoria(novaCategoria) {
  const proximaUrl = new URL(window.location.href);

  if (novaCategoria === 'todas') {
    proximaUrl.searchParams.delete('categoria');
  } else {
    proximaUrl.searchParams.set('categoria', novaCategoria);
  }

  window.history.pushState({}, '', proximaUrl);
}

Quando usar

Use quando o estado de busca, paginação ou filtros deve poder ser copiado, favoritado e recuperado ao voltar para a página.

Como adaptar ao seu projeto

Troque os nomes dos parâmetros e decida se a mudança deve criar histórico com pushState ou apenas substituir o estado atual.

Antes de publicar

Parâmetros recebidos são entrada do usuário. Valide os valores antes de usá-los em consultas, HTML ou regras de negócio.

Códigos relacionados

JavaScript

Botão para copiar texto com Clipboard API

Função de cópia com retorno visual e alternativa para navegadores sem acesso à API moderna.

JavaScript

Debounce para campos de busca

Evita executar uma busca pesada a cada tecla e dispara a ação somente depois de uma pequena pausa.

Git

.gitignore para um projeto web

Base conservadora que evita versionar dependências, segredos locais, logs e arquivos gerados.