Vamos falar brevemente sobre o uso de pushState e replaceState em H5

HTML5 introduz os métodos history.pushState() e history.replaceState(), que podem adicionar e modificar entradas do histórico respectivamente. Esses métodos são normalmente usados ​​em conjunto com window.onpopstate.

Suponha que o seguinte código JavaScript seja executado em http://mozilla.org/foo.html:

 var stateObj = { foo: bar };history.pushState(stateObj, página 2, bar.html);

Isso fará com que a barra de endereço do navegador leia http://mozilla.org/bar.html, mas não fará com que o navegador carregue bar.html ou mesmo verifique se bar.html existe.

Suponha que agora o usuário visite http://google.com e clique no botão Voltar. Neste momento, a barra de endereço exibirá http://mozilla.org/bar.html e a página acionará o evento popstate. O estado do objeto de evento contém uma cópia de stateObj. A página em si é igual a foo.html, embora seu conteúdo possa ser modificado no evento popstate.

Se clicarmos no botão Voltar novamente, o URL da página mudará para http://mozilla.org/foo.html, e o objeto do documento document irá acionar outro evento popstate. Desta vez, o objeto de estado do objeto de evento é nulo. O mesmo aqui, o retorno não altera o conteúdo do documento. Embora o documento possa alterar seu conteúdo ao receber o evento popstate, seu conteúdo ainda será consistente com a apresentação anterior.

pushState() leva três parâmetros: um objeto de estado, um título (atualmente ignorado) e (opcional) uma URL. Vamos explicar esses três parâmetros em detalhes:

Objeto de estado — O objeto de estado state é um objeto JavaScript que cria novas entradas no histórico por meio de pushState(). Sempre que o usuário navega para um novo estado, o evento popstate é acionado e a propriedade state do evento contém uma cópia do objeto de estado da entrada do histórico.

title — Este parâmetro é atualmente ignorado, mas pode ser usado no futuro. Passar uma string vazia é seguro aqui, mas inseguro no futuro. Alternativamente, você pode passar um título curto para o estado de salto.

URL — Este parâmetro define o novo registro histórico de URL. Observe que o navegador não carregará esse URL imediatamente após chamar pushState(), mas poderá carregá-lo posteriormente em determinadas circunstâncias, como quando o usuário reabrir o navegador. A nova URL não precisa ser um caminho absoluto. Se o novo URL for um caminho relativo, ele será tratado como relativo ao URL atual. A nova URL deve ter a mesma origem da URL atual, caso contrário pushState() lançará uma exceção. Este parâmetro é opcional e o padrão é o URL atual.

De certa forma, chamar pushState() é semelhante a definir window.location = #foo, ambos criarão e ativarão um novo registro de histórico na página atual. Mas pushState() tem as seguintes vantagens:

O novo URL pode ser qualquer URL que tenha a mesma origem do URL atual. E a configuração window.location apenas mantém o mesmo arquivo se você modificou apenas o valor do hash.

Se desejar, um registro histórico pode ser criado sem alterar a URL. Definir window.location = #foo; criará uma nova entrada no histórico apenas se o hash atual não for #foo;

Podemos associar dados arbitrários a novos itens do histórico. Com o método baseado em valor hash, todos os dados relevantes devem ser codificados em uma string curta.

O uso de history.replaceState() é muito semelhante a history.pushState(). A diferença é que replaceState() modifica o item do histórico atual em vez de criar um novo.

Sempre que uma entrada ativa do histórico é alterada, o evento popstate é acionado no objeto de janela correspondente. Se a entrada de histórico atualmente ativa foi criada pelo método history.pushState() ou modificada pelo método history.replaceState(), a propriedade state do objeto de evento popstate contém uma cópia do objeto de estado desta entrada de histórico.

Também podemos obter o estado diretamente no objeto histórico, como segue:

 var estado atual = histórico.estado;

Deve-se observar que chamar history.pushState() ou history.replaceState() não acionará o evento popstate. O evento opstate só será acionado sob determinadas ações do navegador, como clicar nos botões voltar e avançar (ou chamar os métodos history.back(), history.forward() e history.go() em JavaScript).

Se o endereço da página da web atual for http://example.com/example.html, execute o seguinte código:

 window.onpopstate = function(event) { alert(location: + document.location + , state: + JSON.stringify(event.state));};//Bind função de processamento de eventos.pushState({page: 1 } , title 1, ?page=1); //Adicione e ative uma entrada no histórico http://example.com/example.html?page=1, o índice da entrada é 1history.pushState({page: 2}, title 2, ?page=2); //Adicione e ative uma entrada no histórico http://example.com/example.html?page=2, o índice da entrada é 2history.replaceState({page: 3}, title 3, ? page=3); //Modifique a entrada do histórico atualmente ativada http://ex..?page=2 para http://ex..?page=3, e o índice da entrada é 3history.back(); Localização pop-up: http://example.com/example.html?page=1, estado: {page:1}history.back(); // Local do pop-up: http://example.com/example.html, estado: nullhistory.go(2); //Localização do pop-up: http://example.com/example.html?page=3, estado: {página:3}

Wang Er usa pushState() principalmente porque pode monitorar o evento de retorno no navegador. Isso também se aplica ao terminal móvel. Consulte o código a seguir (pode ser executado diretamente):

 <body> <div>window.onpopstate pode monitorar o evento da chave de retorno</div> <script> history.pushState({}, ); window.onpopstate = function(event) { //Aqui você pode monitorar o evento de retorno do navegador e faça o que quiser, //Por exemplo: pule para outra página da web location.href = https://www.baidu.com };

Claro, você também pode usar window.onhashchange para monitorar o evento de retorno no navegador. Consulte o código a seguir (pode ser executado diretamente):

 <body> <div>window.onhashchange pode monitorar o evento da chave de retorno</div> <script> setTimeout(()=>{ location.hash=a },100); função(evento) {localização.href = https://www.baidu.com } },200);

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.