1 files changed, 91 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/history/pushstate/index.html b/files/zh-cn/web/api/history/pushstate/index.html
new file mode 100644
index 0000000000..6612079f11
--- /dev/null
+++ b/files/zh-cn/web/api/history/pushstate/index.html
@@ -0,0 +1,91 @@
+---
+title: History.pushState()
+slug: Web/API/History/pushState
+tags:
+  - API
+  - History
+  - Location
+  - Web
+  - 会话
+  - 历史
+  - 参考
+  - 方法
+translation_of: Web/API/History/pushState
+---
+<div>History API</div>
+
+<p>在 <a href="/zh-CN/docs/Web/HTML">HTML</a> 文档中，<strong><code>history.pushState()</code></strong> 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>])</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>state</code></dt>
+ <dd>状态对象是一个JavaScript对象，它与<code>pushState()</code>创建的新历史记录条目相关联。 每当用户导航到新状态时，都会触发{{event("popstate")}}事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。</dd>
+ <dd>状态对象可以是任何可以序列化的对象。 因为Firefox将状态对象保存到用户的磁盘上，以便用户重新启动浏览器后可以将其还原，所以我们对状态对象的序列化表示施加了640k个字符的大小限制。 如果将序列化表示形式大于此状态的状态对象传递给<code>pushState()</code>，则该方法将引发异常。 如果您需要更多空间，建议您使用 {{domxref("Window.sessionStorage", "sessionStorage")}}或者{{domxref("Window.localStorage", "localStorage")}}。</dd>
+ <dt><code>title</code></dt>
+ <dd><a href="https://github.com/whatwg/html/issues/2174">当前大多数浏览器都忽略此参数</a>，尽管将来可能会使用它。 在此处传递空字符串应该可以防止将来对方法的更改。 或者，您可以为要移动的州传递简短的标题。</dd>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>新历史记录条目的URL由此参数指定。 请注意，浏览器不会在调用<code>pushState() </code>之后尝试加载此URL，但可能会稍后尝试加载URL，例如在用户重新启动浏览器之后。 新的URL不必是绝对的。 如果是相对的，则相对于当前URL进行解析。 新网址必须与当前网址相同 {{glossary("origin")}}； 否则，<code>pushState()</code>将引发异常。 如果未指定此参数，则将其设置为文档的当前URL。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>从某种程度来说, 调用 <code>pushState()</code> 和 <code>window.location = "#foo"</code>基本上一样, 他们都会在当前的document中创建和激活一个新的历史记录。但是 <code>pushState()</code> 有以下优势：</p>
+
+<ul>
+ <li>新的URL可以是任何和当前URL同源的URL。但是设置 {{domxref("window.location")}} 只会在你只设置锚的时候才会使当前的URL。</li>
+ <li>非强制修改URL。相反，设置 <code>window.location = "#foo";</code> 仅仅会在锚的值不是#foo情况下创建一条新的历史记录。</li>
+ <li>可以在新的历史记录中关联任何数据。<code>window.location = "#foo"</code>形式的操作，你只可以将所需数据写入锚的字符串中。</li>
+</ul>
+
+<p>注意： <code>pushState()</code> 不会造成 {{event("hashchange")}} 事件调用, 即使新的URL和之前的URL只是锚的数据不同。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>以下代码通过设置<code><em>state</em></code>, <code><em>title</em></code>和<code><em>url</em></code>创建一条新的历史记录。</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>没有改变{{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>初始化</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.History.pushState")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>