replaceState () vs pushState ()

Tenho lido e procurado vantagens / desvantagens entre replaceState()& pushState(). Leia também o artigo da Mozilla , e este teste interessante , mas ainda não está claro para mim as diferenças.

Alguém se preocupa em explicar em que eles diferem?

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)

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.