replaceState()vs pushState()

Question

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

任何人都在关心他们的不同之处？

Answer 1

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

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

Answer 2

从您的链接

history.replaceState()的运行方式与history.pushState()完全相同,只是replaceState()修改当前历史记录条目而不是创建新条目.

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

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

想象一下,就像我正在通过将一张卡放在另一张牌(面朝上)上来处理一副纸牌而你只能拿到一堆牌中的顶牌(即我发出的最后一张牌).假设我把一颗Jack of Hearts放在一堆.现在我可以使用下一张卡片replaceState,所以我把Jack of Hearts取下并放上下一张卡片.卡片的数量是相同的,因为我们刚刚更换了顶卡.如果我曾经使用过pushState,我会将下一张牌放在Jack of Hearts的顶部(所以现在两者都存在于堆中,并且堆是一张更高的牌).

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