Uma pessoa filtra uma lista por "café & chá", copia o endereço e manda para outra. Se os filtros vivem apenas no estado da interface, o link abre a lista sem a seleção. Colocar o filtro na query string resolve o compartilhamento e ajuda a restaurar a tela depois de atualizar a página.

const url = new URL(window.location.href)
url.searchParams.set("q", "café & chá")
url.searchParams.delete("page")
history.replaceState(history.state, "", url)

URLSearchParams cuida da codificação. Use append para filtros que aceitam várias ocorrências do mesmo nome e getAll para recuperar a lista. Para parâmetros de valor único, set substitui as ocorrências anteriores.

Defina o que entra no histórico

Durante a digitação, replaceState evita criar uma entrada por tecla. Para filtros aplicados por um botão, pushState pode ser mais adequado quando o usuário precisa voltar à seleção anterior. Em aplicações com roteador próprio, use a API do roteador para manter a interface sincronizada com a navegação. Ao ler page da URL, valide o número antes de consultar o servidor.

Documentação de referência · Como cancelar fetch e limitar o tempo de uma requisição