javascript - replaceState() 与 pushState()

Question

我一直在阅读和寻找replaceState()&之间的优点/缺点pushState()。另请阅读 Mozilla 的文章，以及这个有趣的测试，但我仍然不清楚其中的差异。

有人愿意解释它们的不同之处吗？

Answer 1

replaceState()将更改浏览器中的 URL（即按后退按钮不会带您返回）

pushState()将更改 URL，并将旧 URL 保留在浏览器历史记录中（即按后退按钮将带您返回）

Answer 2

从你的链接

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

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

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

想象一下，我正在通过将一张牌放在另一张牌上（面朝上）来发一副牌，而您只能拿走牌堆中的顶牌（即我发的最后一张牌）。假设我在牌堆上放了一个红心杰克。现在是下一张牌，如果我使用replaceState，所以我把红心杰克拿掉，然后放下一张牌。卡的数量是一样的，因为我们只是替换了最上面的卡。如果我pushState改用了，我会把下一张牌放在红桃 J 上（所以现在两者都存在于牌堆中，而且牌堆高出一张牌）。

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