replaceState（） vs pushState（）

javascript html

2022-08-30 05:32:09

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

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

答案 1

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

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

答案 2

从您的链接

history.replaceState（）的操作与 history.pushState（）完全相同，只是 replaceState（）修改当前历史记录条目，而不是创建一个新的条目。

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

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

把它想象成我正在通过把一张牌放在另一张牌上（面朝上）来处理一副牌，你只能拿走一堆牌（即我发的最后一张牌）。假设我把一个心形杰克放在堆上。现在，如果我使用下一张卡，所以我把那张心形杰克拿下来，然后把下一张卡放上去。卡的数量是相同的，因为我们刚刚更换了顶部的卡。如果我用它来代替，我会把下一张牌放在心形杰克的顶部（所以现在两者都存在于一堆中，而且这一堆牌高了一张）。replaceStatepushState

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