Como gerir a história do navegador em JavaScript, avançando e recuando?

O objeto history fornece acesso ao histórico de sessões do navegador. Os principais métodos para gerir o histórico são:

• history.back(): volta uma página no histórico.
• history.forward(): avança uma página no histórico.
• history.go(delta): move-se pelo número de passos especificado no histórico (delta pode ser negativo para voltar atrás).

Exemplo de uso:

// Voltar à página anterior
history.back();

// Ir para a próxima página
history.forward();

// Voltar duas páginas
history.go(-2);

// Avançar três páginas
history.go(3);

Além disso, o objeto history permite gerir o estado do histórico sem recarregar a página, usando os métodos pushState e replaceState.

• history.pushState(state, title, url): adiciona um novo estado ao histórico da sessão.
  • state: objeto de estado associado à entrada do histórico.
  • title: título da página (a maioria dos navegadores ignora-o).
  • url: URL associado à entrada do histórico.
• history.replaceState(state, title, url): substitui o estado atual no histórico da sessão.

Exemplo com pushState:

// Adicionar um novo estado ao histórico
history.pushState({ page: 1 }, "Página 1", "/page1");

// Realizar ações na página sem recarregamento completo

// Quando o utilizador clicar no botão "voltar", o evento popstate será acionado
window.addEventListener('popstate', function(event) {
  console.log('O estado mudou:', event.state); // { page: 1 }
  // Atualizar o conteúdo da página de acordo com o estado
});

Exemplo com replaceState:

// Substituir o estado atual no histórico
history.replaceState({ tab: 'active' }, "Aba ativa", "/active-tab");

O evento popstate é acionado quando uma entrada do histórico de sessão é ativada.