--- title: History.pushState() slug: Web/API/History/pushState tags: - API - History - Location - Web - 会话 - 历史 - 参考 - 方法 translation_of: Web/API/History/pushState ---
在 HTML 文档中,history.pushState()
方法向当前浏览器会话的历史堆栈中添加一个状态(state)。
history.pushState(state, title[, url])
state
pushState()
创建的新历史记录条目相关联。 每当用户导航到新状态时,都会触发{{event("popstate")}}事件,并且该事件的状态属性包含历史记录条目的状态对象的副本。pushState()
,则该方法将引发异常。 如果您需要更多空间,建议您使用 {{domxref("Window.sessionStorage", "sessionStorage")}}或者{{domxref("Window.localStorage", "localStorage")}}。title
url
{{optional_inline}}pushState()
之后尝试加载此URL,但可能会稍后尝试加载URL,例如在用户重新启动浏览器之后。 新的URL不必是绝对的。 如果是相对的,则相对于当前URL进行解析。 新网址必须与当前网址相同 {{glossary("origin")}}; 否则,pushState()
将引发异常。 如果未指定此参数,则将其设置为文档的当前URL。从某种程度来说, 调用 pushState()
和 window.location = "#foo"
基本上一样, 他们都会在当前的document中创建和激活一个新的历史记录。但是 pushState()
有以下优势:
window.location = "#foo";
仅仅会在锚的值不是#foo情况下创建一条新的历史记录。window.location = "#foo"
形式的操作,你只可以将所需数据写入锚的字符串中。注意: pushState()
不会造成 {{event("hashchange")}} 事件调用, 即使新的URL和之前的URL只是锚的数据不同。
以下代码通过设置state
, title
和url
创建一条新的历史记录。
const state = { 'page_id': 1, 'user_id': 5 } const title = '' const url = 'hello-world.html' history.pushState(state, title, url)
规范 | 状态 | 备注 |
---|---|---|
{{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}} | {{Spec2('HTML WHATWG')}} | 没有改变{{SpecName("HTML5 W3C")}}. |
{{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}} | {{Spec2('HTML5 W3C')}} | 初始化 |
{{Compat("api.History.pushState")}}