window History的pushState和replaceState方法_window.history.replacestate-CSDN博客

本文链接：https://blog.csdn.net/weixin_48065262/article/details/130606571

history.pushState和replaceState是JavaScript中用于操作浏览器历史记录的方法。它们不会实际加载新页面，但能改变URL。pushState添加新记录到历史堆栈，而replaceState替换当前记录。两者都受限于同源策略，且状态对象大小有限制。当用户导航时，popstate事件会被触发，提供状态对象的副本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、history.pushState(state, title[, url])

向当前浏览器会话的历史堆栈中添加一个状态。

参数：
- state
  状态对象是一个JavaScript对象，它与pushState()创建的新历史记录条目相关联。每当用户导航到新状态时，都会触发popstate (en-US)事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。状态对象可以是任何可以序列化的对象。因为Firefox将状态对象保存到用户的磁盘上，以便用户重新启动浏览器后可以将其还原，所以我们对状态对象的序列化表示施加了640k个字符的大小限制。如果将序列化表示形式大于此状态的状态对象传递给pushState()，则该方法将引发异常。如果需要更多空间，建议使用 sessionStorage或者localStorage。
- title
  在此处传递空字符串应该可以防止将来对方法的更改。
- url
  新历史记录条目的URL由此参数指定。
示例：

 const url = `${window.location.origin}${window.location.pathname}?a=1`;
 window.history.pushState({}, "", url);

二、history.replaceState(state, title[, url])

参数：
- stateObj
  状态对象是一个JavaScript对象，它与传递给 replaceState 方法的历史记录实体相关联.
- title
  在此处传递空字符串应该可以防止将来对方法的更改。（一般忽略不写）
- url(可选)
  历史记录实体的URL. 新的URL跟当前的URL必须是同源，否则 replaceState 抛出一个异常。
示例：

 const url = `${window.location.origin}${window.location.pathname}?a=1`;
 window.history.replaceState({}, "", url);

三、区别

共同点：
- 仅改变网址，网页不会真的跳转，也不会获取到新的内容，本质上网页还停留在原页面。
- 不支持跨域问题，不能重写到另一个域名下。
不同点:
- pushState:
  在历史记录中增加一条新的记录。
- replaceState:
  将当前的历史记录给替换掉。