Remover parâmetros de URL sem recarregar a página com JS

Neste artigo você vai aprender a como remover parâmetros de URL sem recarregar a página com JavaScript, vem conferir!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Introdução

Ao desenvolver aplicativos da web, é comum adicionar e remover parâmetros de URL para refletir o estado da aplicação ou filtrar dados.

No entanto, algumas vezes, você pode querer remover parâmetros de URL sem recarregar a página.

Neste artigo, vamos mostrar como remover parâmetros de URL sem recarregar a página usando JavaScript.

Vamos abordar o conceito de manipulação do histórico do navegador e também como manipular a URL atual.

Entendendo a API do histórico do navegador

A API do histórico do navegador fornece uma maneira de manipular o histórico do navegador usando o objeto window.history.

Ele permite adicionar, modificar e remover entradas do histórico do navegador sem a necessidade de recarregar a página.

A API do histórico é especialmente útil ao criar aplicativos da web de página única (SPA) que requerem navegação sem recarregar a página.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Método pushState e replaceState

Os principais métodos fornecidos pela API do histórico do navegador são pushState() e replaceState().

O método pushState() adiciona uma nova entrada ao histórico do navegador, enquanto o método replaceState() modifica a entrada atual do histórico.

Ambos os métodos aceitam três argumentos:

1. Um objeto de estado: um objeto JavaScript associado à nova entrada do histórico.
2. Um título: um título para a nova entrada do histórico (atualmente ignorado pelos navegadores).
3. Uma URL: a URL da nova entrada do histórico.

Como remover parâmetros de URL sem recarregar a página

Agora que entendemos a API do histórico do navegador, vamos ver como podemos usá-la para remover parâmetros de URL sem recarregar a página.

Para isso, usaremos o método replaceState().

Exemplo:

function removerParametrosDaURL(url) {
  // Criando um objeto URL a partir da URL fornecida
  const urlObj = new URL(url);

  // Removendo os parâmetros de pesquisa da URL
  urlObj.search = '';

  // Atualizando a URL atual no histórico do navegador
  window.history.replaceState({}, '', urlObj.toString());
}

// Exemplo de uso:
removerParametrosDaURL(window.location.href);

Neste exemplo, criamos uma função chamada removerParametrosDaURL() que aceita a URL como argumento.

A função cria um objeto URL a partir da URL fornecida, remove os parâmetros de pesquisa e, em seguida, atualiza a URL atual no histórico do navegador usando o método replaceState().

Exemplo prático: Removendo parâmetros de URL específicos

Suponha que você queira remover apenas alguns parâmetros específicos da URL, e não todos.

Para isso, você pode modificar a função removerParametrosDaURL() para aceitar uma lista de parâmetros a serem removidos.

function removerParametrosEspecificosDaURL(url, parametrosParaRemover) {
  // Criando um objeto URL a partir da URL fornecida
  const urlObj = new URL(url);

  // Iterando pelos parâmetros fornecidos e removendo-os da URL
  parametrosParaRemover.forEach((param) => {
    urlObj.searchParams.delete(param);
  });

  // Atualizando a URL atual no histórico do navegador
window.history.replaceState({}, '', urlObj.toString());
}

// Exemplo de uso:
removerParametrosEspecificosDaURL(window.location.href, ['param1', 'param2']);

Neste exemplo, modificamos a função `removerParametrosDaURL()` para aceitar uma lista de parâmetros a serem removidos.

A função cria um objeto `URL` a partir da URL fornecida, itera pelos parâmetros fornecidos e os remove usando o método `delete()` do objeto `searchParams`.

Em seguida, atualiza a URL atual no histórico do navegador usando o método `replaceState()`.

Cuidados e considerações

Embora a manipulação da URL usando a API do histórico do navegador seja poderosa, é importante ter algumas precauções em mente:

1. A manipulação do histórico do navegador só é possível quando a URL atual e a nova URL compartilham o mesmo domínio. Isso ocorre devido às restrições de segurança impostas pelos navegadores para evitar ataques de falsificação de solicitações entre sites (CSRF).
2. A manipulação do histórico do navegador pode afetar o comportamento do botão Voltar do navegador. Ao usar o método `pushState()`, você pode adicionar entradas adicionais ao histórico do navegador, o que pode resultar em uma experiência de navegação inesperada para o usuário. Por outro lado, o método `replaceState()` modifica a entrada atual do histórico e não afeta o comportamento do botão Voltar.
3. Alguns navegadores mais antigos podem não suportar a API do histórico do navegador. Portanto, é importante verificar a compatibilidade do navegador e fornecer soluções alternativas, se necessário.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Neste artigo, mostramos como remover parâmetros de URL sem recarregar a página usando JavaScript.

Abordamos o conceito de manipulação do histórico do navegador e como usar os métodos `pushState()` e `replaceState()` para modificar a URL atual.

Além disso, fornecemos exemplos práticos de como remover todos os parâmetros de URL ou apenas parâmetros específicos.

Ao usar essas técnicas, você pode melhorar a experiência do usuário em seu aplicativo da web e criar uma navegação mais eficiente.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!