Como voltar, avançar e manipular o histórico de navegação do browser com javascript

Como voltar, avançar e manipular o histórico de navegação do browser com javascript

Usando javascript, podemos criar eventos que façam o usuário voltar ou avançar uma página, imitando os botões de voltar e avançar do próprio navegador. Para executar essa tarefa vamos utilizar o window.history.

Como voltar e avançar o histórico recarregando a página

Como voltar para a página anterior com javascript

Para voltar para a página anterior com javascript (imitando o botão voltar do navegador) é só usar:

window.history.back();

Como avançar o histórico com javascript

E para avançar o histórico com javascript (imitando o botão avançar do navegador) basta usar:

window.history.forward();

Como navegar pelo histórico com javascript

Outra maneira de voltar e avançar o histórico é usando window.history.go(), passando um número inteiro como parâmetro, representando a quantidade do avanço ou recuo. Se o número for positivo avança, negativo volta e zero (ou sem passar parâmetro) recarrega a página atual.

window.history.go(-2); // volta 2 páginas no histórico
window.history.go(-1); // volta para a página anterior, igual back()
window.history.go(1); // avança uma página, igual forward()
window.history.go(2); // avança 2 páginas no histórico
window.history.go(0); // recarrega a página atual
window.history.go(); // recarrega a página atual

Consultando o número de páginas no histórico de navegação atual

Com o código abaixo podemos checar quantas páginas o usuário percorreu nesta mesma aba do navegador:

let qtd = window.history.length;

Referências