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:
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.
##Fontes: