在此页

• 句法
• 描述
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

In an HTML document, the history.pushState() method adds a state to the browser's session history stack.

句法

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

参数

state

The state object is a JavaScript object which is associated with the new history entry created by pushState() . Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState() , the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage .

title

Most browsers currently ignore this parameter , although they may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.

url 可选

The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState() , but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. If this parameter isn't specified, it's set to the document's current URL.

描述

In a sense, calling pushState() is similar to setting window.location = "#foo" , in that both will also create and activate another history entry associated with the current document. But pushState() has a few advantages:

• The new URL can be any URL in the same origin as the current URL. In contrast, setting window.location keeps you at the same document only if you modify only the hash.
• You don't have to change the URL if you don't want to. In contrast, setting window.location = "#foo"; only creates a new history entry if the current hash isn't #foo .
• You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.

注意， pushState() never causes a hashchange event to be fired, even if the new URL differs from the old URL only in its hash.

范例

This creates a new browser history state setting the state , title ，和 url .

JavaScript

const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'
history.pushState(state, title, url)
					

规范

规范	状态	注释
HTML 实时标准 The definition of 'History.pushState()' in that specification.	实时标准	无变化自 HTML5 .
HTML5 The definition of 'History.pushState()' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
pushState	Chrome 5	Edge 12	Firefox 4 4 Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm . This allows a wider variety of objects to be safely passed.	IE 10	Opera 11.5	Safari 5	WebView Android ≤37	Chrome Android 18	Firefox Android 4 4 Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm . This allows a wider variety of objects to be safely passed.	Opera Android 11.5	Safari iOS 4.3	Samsung Internet Android 1.0
是否 title argument is used	Chrome No	Edge No	Firefox No	IE No	Opera No	Safari Yes	WebView Android No	Chrome Android No	Firefox Android No	Opera Android No	Safari iOS ?	Samsung Internet Android No

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

见实现注意事项。

另请参阅

• 处理历史的 API

元数据

• 最后修改： Jul 20, 2020

相关话题

1. 历史 API
2. 历史
3. 特性

   1. length
   2. scrollRestoration
   3. state
4. 方法

   1. back()
   2. forward()
   3. go()
   4. pushState()
   5. replaceState()