Como Trabalhar com Parâmetros na URL com JavaScript: Guia Completo

Publicado em 20/06/2024

Fala, Dev! 🖖 Você já precisou manipular parâmetros via URL, mas não queria utilizar alguma linguagem de back-end para isso, ou apenas gostaria de fazer isso de maneira mais rápida e pratica? Então hoje vamos juntos aprender como inserir, capturar e manipular parâmetros usando JavaScript.

Pegue seu café, relaxe e vamos codar!

O que são Parâmetros na URL?

First things first, imagine que você precisa desenvolver uma pesquisa em uma loja online, de forma que quando o usuário procurar por “camisetas vermelhas”, é necessário passar esse termo na url para que a pesquisa seja realizada em sua base. Ao clicar na pesquisa, você criar uma URL nova como www.lojavirtual.com/search?q=camisetas+vermelhas. Esse trecho após o `?` é um parâmetro da URL, e esses parâmetros são usados para passar informações adicionais ao servidor, o que pode ser extremamente útil em várias situações.

Como Trabalhar com Parâmetros na URL Usando JavaScript

Inserindo Parâmetros na URL

Adicionar parâmetros a uma URL é super simples. Vamos começar com um exemplo básico, imagine que você precisa inserir os parâmetros de produto e cor na sua loja virtual:

// URL base
let url = new URL('https://www.meusite.com');

// Adicionando parâmetros
url.searchParams.append('produto', 'camiseta');
url.searchParams.append('cor', 'vermelha');

console.log(url.toString()); 
// Resultado: https://www.meusite.com/?produto=camiseta&cor=vermelha

Capturando Parâmetros da URL com JS

Agora que sabemos como adicionar, vamos aprender a capturar esses parâmetros quando a página carrega.

// Capturando parâmetros da URL atual
let urlParams = new URLSearchParams(window.location.search);
let produto = urlParams.get('produto');
let cor = urlParams.get('cor');

console.log(produto); // Exibe "camiseta"
console.log(cor); // Exibe "vermelha"

Manipulando Parâmetros da URL com JS

A manipulação de parâmetros permite modificar valores existentes ou até remover parâmetros.

// Modificando um parâmetro
urlParams.set('produto', 'calça');
console.log(urlParams.toString()); // produto=calça&cor=vermelha

// Removendo um parâmetro
urlParams.delete('cor');
console.log(urlParams.toString()); // produto=calça

Dicas e Recomendações

• Validação e Sanitização: Sempre valide e sanitize os parâmetros da URL para evitar ataques como SQL Injection ou XSS.
• Uso Moderado: Evite usar muitos parâmetros na URL para não torná-la confusa e difícil de gerenciar.
• Privacidade: Não utilize dados sensíveis, como ID do usuário, em parâmetros expostos na URL, para dados sensíveis utilize o método POST.
• Documentação: Para se aprofundar mais, confira a documentação no MDN.

Enfim…

Trabalhar com parâmetros na URL usando JavaScript pode parecer complicado no início, mas com prática, se torna uma tarefa simples. Então, aproveite essas dicas e não tenha medo de explorar e testar o uso de parâmetros via URL com JavaScript!