replaceState () vs pushState ()

Respostas:

162

replaceState()vai mudar a URL no navegador (ie. pressionando o botão de volta não vai levá-lo de volta)

pushState() irá alterar o URL e manter o antigo no histórico do navegador (ou seja, pressionar o botão Voltar o levará de volta)


fonte
58

Do seu link

history.replaceState () opera exatamente como history.pushState (), exceto que replaceState () modifica a entrada do histórico atual em vez de criar uma nova.

replaceState () é particularmente útil quando você deseja atualizar o objeto de estado ou URL da entrada do histórico atual em resposta a alguma ação do usuário.

Se você deseja simplesmente atualizar a entrada do histórico, use o replaceState()contrário pushState(), use , que manterá a entrada antiga e criará uma nova. Eles são semelhantes, mas ambos têm efeitos diferentes, portanto, depende se você deseja ou não substituir ou criar novas entradas de histórico.

Pense nisso como se eu estivesse distribuindo um baralho colocando uma carta sobre a outra (virada para cima) e você só pode pegar a carta do topo da pilha (ou seja, a última carta que distribuí). Digamos que eu coloquei um Valete de Copas na pilha. Agora, para a próxima carta, se eu usar replaceState, então tiro aquele Valete de Copas e coloco a próxima carta. O número de cartas é o mesmo, pois acabamos de substituir a carta do topo. Se eu tivesse usado em pushStatevez disso, teria colocado a próxima carta no topo do Valete de Copas (agora ambos existem na pilha e a pilha está uma carta acima).

Troque os cartões na analogia com URLs e é assim que o histórico de URL é modificado.

teclado P
fonte
2
"history.replaceState () opera exatamente como history.pushState (), exceto que replaceState () modifica a entrada do histórico atual em vez de criar uma nova." esta citação eu encontrei aqui developer.mozilla.org/en-US/docs/Web/API/History_API . você pode explicar o que é o histórico global do navegador. ele diz que a entrada é criada no histórico global do navegador.
Raghu DV
O que significa "histórico global do navegador"? @RaghuDV
stevemao
@keyboardP Awesome explicado. Muito obrigado.
michael.zech
estou usando history.replaceState()para anexar uma consulta no final do meu url. mas quando eu respondo, vou para o url sem consulta anexada. exatamente como pushState(). !! o url atual não deveria ser atualizado?
Mojtaba Barari