Skip to main content
1 de 2
Maicon Carraro
  • 9mil
  • 2
  • 23
  • 51

Os métodos history.pushState() e history.replaceState() foram introduzidos no HTML5 para conseguir recuperar e modificar valores durante o histórico de navegação do usuário.

Ambos métodos funcionam da mesma maneira, a única diferença é que o pushState adiciona um novo estado no histórico enquanto que o replaceState sobrescreve o estado que foi colocado pelo pushState.

Os dois possuem três parâmetros: state object, title e URL.

  • state object — É o objeto que vai ficar associado com aquele determinado histórico criado pelo pushState(). Quando o usuário usa o botão de voltar no navegador ou pelo history.go(-1) é possível recuperar esse objeto através do evento chamado popstate. Além do objeto precisa ser serializável.

  • title — é um título opcional, ignorado até o momento.

  • URL — modifica a URL que aparece no navegador, mas não redireciona realmente pra essa URL é apenas visual.

##Exemplo:

  1. Crie um arquivo teste.html

  2. Adicione o seguinte código dele e abra-a no navegador.


<script>
    window.onpopstate = function(event) {
      alert("url: " + document.location + ", objeto: " + JSON.stringify(event.state));
    };

    // cria o primeiro estado no histórico
    history.pushState({pagina: 1}, "titulo 1", "?pagina=1");

    // cria o segundo estado no histórico
    history.pushState({pagina: 2}, "titulo 2", "?pagina=2");

    // sobrescreve o estado atual (2) por um novo
    history.replaceState({pagina: 3}, "titulo 3", "?pagina=3");

    // volta uma pagina, você estava no (3) volta pro (1), pois o (2) foi sobrescrito
    history.back(); // alerts "url: .../exemplo.html?pagina=1, objeto: {"pagina":1}"

    // volta pra primeira pagina onde não tinha nenhum estado criado ainda, pois você já volto uma e esta no (1)
    history.back(); // alerts "url: .../exemplo.html, objeto: null

    // avança 2 páginas, estava no "null", passou pelo (1) e voltou pro (3)
    history.go(2);  // alerts "url: .../exemplo.html?pagina=3, state: {"pagina":3}

</script>

Fique utilizando o voltar e avançar do navegador para perceber os alerts.


##Uma coisa importante! Se você quiser ficar transitando objetos pelos estados do histórico que são MUITO grandes, o recomendável é utilizar sessionStorage ou localStorage.


##Quer brincar mais com o pushState e replaceState?

http://blogs.sitepointstatic.com/examples/tech/history-pushstate/index.html

É um ótimo exemplo de como trabalhar com esses métodos.


##Fontes:

Maicon Carraro
  • 9mil
  • 2
  • 23
  • 51