Os métodos [*history.pushState()*][1] e [*history.replaceState()*][2] 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`][3]. Além do objeto precisa ser [serializável][4]. 

 - **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.

<br>

    <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**. 

<br>

##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*.


<br>

##Quer brincar mais com o `pushState` e `replaceState`?

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

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

<br>

##Fontes:

 - https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

 - http://www.sitepoint.com/javascript-history-pushstate/

 - https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

 - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history


  [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState()_method
  [2]: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_replaceState()_method
  [3]: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
  [4]: http://www.macoratti.net/vbn_seri.htm
  [5]: http://blogs.sitepointstatic.com/examples/tech/history-pushstate/index.html