2

Olá, eu gostaria de saber o que o seguinte código faz:

window.history.replaceState  
2

1 Resposta 1

4

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:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .