replaceState() 与 pushState()

Question

我一直在阅读和寻找replaceState() 和pushState() 之间的优缺点。 另请阅读 Mozilla 的 article 和这个 interesting 测试，但我仍然不清楚它们之间的区别。

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

Answer 1

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

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

Answer 2

来自您的链接

history.replaceState() 的操作与 history.pushState() 完全相同 除了 replaceState() 改为修改当前历史条目 创建一个新的。

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

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

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

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