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 pelohistory.go(-1)
é possível recuperar esse objeto através do evento chamadopopstate
. 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 essaURL
é apenas visual.
Exemplo:
Crie um arquivo teste.html
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.