initial commit

9 files changed, 641 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/history/back/index.html b/files/zh-cn/web/api/history/back/index.html
new file mode 100644
index 0000000000..2bdafe4d06
--- /dev/null
+++ b/files/zh-cn/web/api/history/back/index.html
@@ -0,0 +1,59 @@
+---
+title: back()
+slug: Web/API/History/back
+tags:
+  - HTML5
+  - History
+translation_of: Web/API/History/back
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>back()</code>方法会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span>history<span class="punctuation token">.</span><span class="function token">back</span><span class="punctuation token">(</span><span class="punctuation token">)</span></code></pre>
+
+<h2 id="示例">示例</h2>
+
+<p>下述简短示例使页面上的按钮导航页面至会话历史的后一项。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button id="go-back"&gt;Go back!&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">window.onload = function(e) {
+  document.getElementById('go-back').addEventListener('click', e =&gt; {
+    window.history.back();
+  })
+}</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.History.back")}}</p>
diff --git a/files/zh-cn/web/api/history/forward/index.html b/files/zh-cn/web/api/history/forward/index.html
new file mode 100644
index 0000000000..c2baa8227d
--- /dev/null
+++ b/files/zh-cn/web/api/history/forward/index.html
@@ -0,0 +1,58 @@
+---
+title: forward()
+slug: Web/API/History/forward
+tags:
+  - DOM
+  - HTML5
+  - History
+translation_of: Web/API/History/forward
+---
+<p>在会话历史中向前移动一页。它与使用<code>delta</code>参数为1时调用 <code>history.go(delta)</code>的效果相同。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">window.history.forward();</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>下述例子创建了一个按钮，该按钮会在会话历史中向前移动一步。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button id='go-forward'&gt;Go Forward!&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="function function-variable token">onload</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'go-forward'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="parameter token">e</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+    window<span class="punctuation token">.</span>history<span class="punctuation token">.forward</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.History.forward")}}</p>
diff --git a/files/zh-cn/web/api/history/go/index.html b/files/zh-cn/web/api/history/go/index.html
new file mode 100644
index 0000000000..a6fe7b38a8
--- /dev/null
+++ b/files/zh-cn/web/api/history/go/index.html
@@ -0,0 +1,77 @@
+---
+title: go()
+slug: Web/API/History/go
+tags:
+  - History
+translation_of: Web/API/History/go
+---
+<p><code>go()</code>方法从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于<code>delta</code>参数的值。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">window.history.go(delta);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>delta</code> {{optional_inline}}</dt>
+ <dd>相对于当前页面你要去往历史页面的位置。负值表示向后移动，正值表示向前移动。因此，例如：<code>history.go(2)</code>向前移动两页，<code>history.go(-2)</code>则向后移动两页。如果未向该函数传参或<code>delta</code>相等于0，则该函数与调用<code>location.reload()</code>具有相同的效果。</dd>
+ <dt>
+ <div class="blockIndicator note">
+ <p>译者注：</p>
+
+ <p>相等于0是采用宽松相等进行比较的。另外，JavaScript值古怪的隐式转换在这里也是可用的。</p>
+ </div>
+ </dt>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>向后移动一页（等价于调用<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/back" title="The back method moves back one page in the session history. If there is no previous page, this method call does nothing."><code>back()</code></a>）：</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span>history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>向前移动一页，就像调用了<a href="https://developer.mozilla.org/en-US/docs/Web/API/History/forward" title="Moves forward one page in the session history. It has the same effect as calling history.go() with a delta parameter of 1."><code>forward()</code>：</a></p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span>history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>向前移动两页：</p>
+
+<pre class="brush: js">window.history.go(2);</pre>
+
+<p>向后移动两页：</p>
+
+<pre class="brush: js">window.history.go(-2);</pre>
+
+<p>最后，以下任意一条语句都会重新加载当前页面：</p>
+
+<pre class="brush: js">window.history.go();
+window.history.go(0);</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.History.go")}}</p>
diff --git a/files/zh-cn/web/api/history/index.html b/files/zh-cn/web/api/history/index.html
new file mode 100644
index 0000000000..83b6c18d0e
--- /dev/null
+++ b/files/zh-cn/web/api/history/index.html
@@ -0,0 +1,91 @@
+---
+title: History
+slug: Web/API/History
+translation_of: Web/API/History
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>History</code></strong> 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。</p>
+
+<h2 id="属性">属性</h2>
+
+<p><em><code>History</code></em><em> 接口不继承于任何属性。</em></p>
+
+<dl>
+ <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
+ <dd>返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。</dd>
+ <dt>{{domxref("History.scrollRestoration")}} {{experimental_inline}}</dt>
+ <dd>允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。</dd>
+ <dt>{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待{{event("popstate")}} 事件而查看状态的方式。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>History接口不继承任何方法。</em></p>
+
+<dl>
+ <dt>{{domxref("History.back()")}}</dt>
+ <dd>在浏览器历史记录里前往上一页, 用户可点击浏览器左上角的返回(译者注：←)按钮模拟此方法. 等价于 <code>history.go(-1)</code>.
+ <div class="note"><strong>Note:</strong> 当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。</div>
+ </dd>
+ <dt>{{domxref("History.forward()")}}</dt>
+ <dd>在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进(译者注：→)按钮模拟此方法. 等价于 <code>history.go(1)</code>.
+ <div class="note"><strong>Note:</strong> 当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。</div>
+ </dd>
+ <dt>{{domxref("History.go()")}}</dt>
+ <dd>通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页. 当整数参数超出界限时( 译者注:原文为When <code><em>integerDelta</em></code> is out of bounds )，例如: 如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错。调用没有参数的 <code>go() </code>方法或者不是整数的参数时也没有效果。( 这点与支持字符串作为url参数的IE有点不同)。</dd>
+ <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>按指定的名称和URL（如果提供该参数）将数据push进会话历史栈，数据被DOM进行不透明处理；你可以指定任何可以被序列化的javascript对象。注意到Firefox现在忽略了这个title参数，更多的信息，请看<a href="/zh-CN/docs/Web/API/History_API" title="en/DOM/Manipulating the browser history">manipulating the browser history</a>。
+ <div class="note"><strong>Note:</strong> 在 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }}中， 被传递的对象使用JSON进行序列化. 从 Gecko 6.0 {{ geckoRelease("6.0") }}开始，使用<a href="/en/DOM/The_structured_clone_algorithm">结构化克隆算法</a>进行序列化。这样，就可以让更多类型的对象被安全地传输。</div>
+ </dd>
+ <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。这个数据被DOM 进行了不透明处理。你可以指定任何可以被序列化的javascript对象。注意到Firefox现在忽略了这个title参数，更多的信息，请看<a href="/zh-CN/docs/Web/API/History_API" title="en/DOM/Manipulating the browser history">manipulating the browser history</a>。
+ <div class="note"><strong>Note:</strong> 在 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }} 中, the passed object is serialized using JSON. Starting in Gecko 6.0 {{ geckoRelease("6.0") }}, the object is serialized using <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. This allows a wider variety of objects to be safely passed.</div>
+ </dd>
+</dl>
+
+<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', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: rgba(212, 221, 228, 0.15);">添加</span></font>scrollRestoration</code>  属性.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Custom Scroll Restoration', '#web-idl', "History")}}</td>
+   <td>{{Spec2('Custom Scroll Restoration')}}</td>
+   <td><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: rgba(212, 221, 228, 0.15);">添加</span></font>scrollRestoration</code>  属性.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.History")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="其他">其他</h2>
+
+<ul>
+ <li>{{domxref("Window.history")}} 返回当前会话的history状态</li>
+</ul>
diff --git a/files/zh-cn/web/api/history/length/index.html b/files/zh-cn/web/api/history/length/index.html
new file mode 100644
index 0000000000..bb713e6cb8
--- /dev/null
+++ b/files/zh-cn/web/api/history/length/index.html
@@ -0,0 +1,55 @@
+---
+title: History.length
+slug: Web/API/History/length
+translation_of: Web/API/History/length
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>History.length是一个只读属性，返回当前session中的history个数，包含当前页面在内。举个例子，对于新开一个tab加载的页面当前属性返回值1。</p>
+
+<p> </p>
+
+<h2 id="语法">语法</h2>
+
+<p> </p>
+
+<pre class="syntaxbox"><em>length</em> = <em>history</em>.length;
+</pre>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">var result = window.history.length; // 返回当前session中的history个数</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-length", "History.length")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.History.length")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>The {{domxref("History")}} interface it belongs to.</li>
+</ul>
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>
diff --git a/files/zh-cn/web/api/history/replacestate/index.html b/files/zh-cn/web/api/history/replacestate/index.html
new file mode 100644
index 0000000000..e2ff2e1311
--- /dev/null
+++ b/files/zh-cn/web/api/history/replacestate/index.html
@@ -0,0 +1,66 @@
+---
+title: History.replaceState()
+slug: Web/API/History/replaceState
+translation_of: Web/API/History/replaceState
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>replaceState()</code>方法使用<code>state objects</code>, <code>title</code>,和 <code>URL</code> 作为参数， 修改当前历史记录实体，如果你想更新当前的state对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js"><code class="language-js">history<span class="punctuation token">.replace</span><span class="function token">State</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">, title[, url]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>stateObj</dt>
+ <dd>状态对象是一个JavaScript对象，它与传递给 <code>replaceState</code> 方法的历史记录实体相关联.</dd>
+ <dt>title</dt>
+ <dd><a href="https://github.com/whatwg/html/issues/2174">大部分浏览器忽略这个参数</a>, 将来可能有用. 在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为该状态传递简短标题</dd>
+ <dt>url {{optional_inline}}</dt>
+ <dd>历史记录实体的URL. 新的URL跟当前的URL必须是同源; 否则 replaceState 抛出一个异常.</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>假设 <span class="nowiki">http://mozilla.org/foo.html</span> 执行下面的 JavaScript 代码:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> stateObj <span class="operator token">=</span> <span class="punctuation token">{</span> foo<span class="punctuation token">:</span> <span class="string token">"bar"</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+history<span class="punctuation token">.</span><span class="function token">pushState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="string token">"bar.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>上面这两行的解释可以在 "Example of pushState() method"这个章节找到。然后假设 <span class="nowiki">http://mozilla.org/bar.html</span>  执行下面的 JavaScript 代码:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">replaceState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="string token">"bar2.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>这会让URL栏显示 <span class="nowiki">http://mozilla.org/bar2.html</span>, 但是不会刷新 <code>bar2.html</code>  页面 甚至不会检查bar2.html 是否存在</p>
+
+<p>假设用户跳转到 <span class="nowiki">http://www.microsoft.com</span>, 然后点击返回按钮.这时, URL 栏将会显示 <span class="nowiki">http://mozilla.org/bar2.html 页面. 如果用户此时点击返回按钮, URL栏将会显示 http://mozilla.org/foo.html 页面, 最终绕过了 bar.html 页面.</span></p>
+
+<h2 id="说明">说明</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.History.replaceState")}}</p>
diff --git a/files/zh-cn/web/api/history/scrollrestoration/index.html b/files/zh-cn/web/api/history/scrollrestoration/index.html
new file mode 100644
index 0000000000..9ae0fa7d9b
--- /dev/null
+++ b/files/zh-cn/web/api/history/scrollrestoration/index.html
@@ -0,0 +1,75 @@
+---
+title: History.scrollRestoration
+slug: Web/API/History/scrollRestoration
+tags:
+  - API
+  - HTML DOM
+  - History
+  - History API
+  - Property
+  - Reference
+translation_of: Web/API/History/scrollRestoration
+---
+<div>{{APIRef("History API")}}</div>
+
+<div></div>
+
+<p>{DOMxRef("History"))的接口——<strong><code>滚动恢复属性</code></strong>允许web应用程序在历史导航上显式地设置默认滚动恢复行为</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">const <em>scrollRestore</em> = history.scrollRestoration</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>将恢复用户已滚动到的页面上的位置。</dd>
+ <dt><code>manual</code></dt>
+ <dd>未还原页上的位置。用户必须手动滚动到该位置。</dd>
+</dl>
+
+<h2 id="案例">案例</h2>
+
+<h3 id="查看当前页面滚动恢复行为">查看当前页面滚动恢复行为</h3>
+
+<pre class="brush: js">const scrollRestoration = history.scrollRestoration
+if (scrollRestoration === 'manual') {
+  console.log('The location on the page is not restored, user will need to scroll manually.');
+}
+</pre>
+
+<h3 id="防止自动恢复页面位置">防止自动恢复页面位置</h3>
+
+<pre class="brush: js">if (history.scrollRestoration) {
+  history.scrollRestoration = 'manual';
+}
+</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", "#scroll-restoration-mode", "scroll restoration mode")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-scrollrestoration", "History.scrollRestoration")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">从结构化数据生成。如果您想对数据进行贡献，请查看https://github.com/mdn/browser-compat-data并向我们发送pull request这个t上的兼容性表能力这一页是</div>
+
+<p>{{Compat("api.History.scrollRestoration")}}</p>
diff --git a/files/zh-cn/web/api/history/state/index.html b/files/zh-cn/web/api/history/state/index.html
new file mode 100644
index 0000000000..7b59ecb5eb
--- /dev/null
+++ b/files/zh-cn/web/api/history/state/index.html
@@ -0,0 +1,69 @@
+---
+title: state
+slug: Web/API/History/state
+translation_of: Web/API/History/state
+---
+<p>返回在 history 栈顶的 <code>任意</code> 值的拷贝。 通过这种方式可以查看 state 值，不必等待 <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/popstate" title="/en-US/docs/Web/Events/popstate">popstate</a></code>事件发生后再查看。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">let currentState = history.state;</pre>
+
+<p>如果不进行下面两种类型的调用，state 的值将会是 null </p>
+
+<p>{{domxref("History.pushState","pushState()")}} or {{domxref("History.replaceState","replaceState()")}}.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下面 log 例句输出 history.state 的值，首先是在没有执行 {{domxref("History.pushState","pushState()")}} 语句进而将值 push 到 history 之前的 log。下面一行 log 语句再次输出 state 值，此时 history.state 已经有值。可以在脚本文件中执行下面语句，或者在控制台直接执行。</p>
+
+<pre class="brush: js">// 值为 null 因为我们还没有修改 history 栈
+console.log(`History.state before pushState: ${history.state}`);
+
+// 现在 push 一些数据到栈里
+history.replaceState({name: 'Example'}, "pushState example", 'page3.html');
+
+// 现在 state 已经有值了
+console.log(`History.state after pushState: ${history.state}`);</pre>
+
+<h2 id="SpecificationsE">Specifications<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/API/History$edit#Specifications" rel="nofollow, noindex"><span>E</span></a></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://html.spec.whatwg.org/multipage/browsers.html#the-history-interface" hreflang="en" lang="en" rel="noopener">HTML Living Standard<br>
+    <small lang="en-US">The definition of 'History' in that specification.</small></a></td>
+   <td><span class="spec-Living">Living Standard</span></td>
+   <td>Adds the <code>scrollRestoration</code> attribute.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://www.w3.org/TR/html50/browsers.html#the-history-interface" hreflang="en" lang="en" rel="noopener">HTML5<br>
+    <small lang="en-US">The definition of 'History' in that specification.</small></a></td>
+   <td><span class="spec-REC">Recommendation</span></td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://majido.github.io/scroll-restoration-proposal/history-based-api.html#web-idl" hreflang="en" lang="en" rel="noopener">Custom Scroll Restoration - History-based API<br>
+    <small lang="en-US">The definition of 'History' in that specification.</small></a></td>
+   <td><span class="spec-Draft">Draft</span></td>
+   <td>Adds the <code>scrollRestoration</code> attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.History.state")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>