replaceState() vs pushState()

Question

我一直在阅读和寻找replaceState()和pushState()之间的优缺点。还可以阅读Mozilla的和这个测试，但我仍然不清楚其中的区别。

有人愿意解释一下他们的不同之处吗？

Answer 1

replaceState()将更改浏览器中的URL (即按下后退按钮不会让你返回)

pushState()将更改网址，并将旧网址保留在浏览器历史记录中(即，按“后退”按钮将返回)

Answer 2

从你的链接

history.replaceState()的操作与history.pushState()完全相同，不同之处在于replaceState()修改当前的历史记录条目，而不是创建新的历史记录条目。

当您想要更新当前历史记录条目的状态对象或URL以响应某些用户操作时，replaceState()特别有用。

如果您只是想更新历史记录条目，则使用replaceState()，否则使用pushState()，它将保留旧条目并创建新条目。它们是相似的，但都有不同的效果，因此这取决于您是否要替换或创建新的历史记录条目。

想象一下，我把一张牌放在另一张牌的上面(正面朝上)，然后你只能拿一叠牌中最上面的一张(也就是我发的最后一张牌)。比方说我在那堆东西上放了一把红心杰克。现在是下一张卡，如果我使用replaceState，那么我把心形插孔拿下来，放上下一张卡。卡片的数量是相同的，因为我们刚刚更换了最上面的卡片。如果我用pushState代替，我会把下一张牌放在红心杰克的上面(所以现在这两张牌都存在于这一堆中，而且这一堆牌又高了一张)。

与URL类似地交换卡片，这就是修改URL历史记录的方式。