---
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>方法或者参数值为0时，重新载入当前页面。( 这点与支持字符串作为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>

<p>{{Compat("api.History")}}</p>

<div id="compat-mobile"></div>

<h2 id="其他">其他</h2>

<ul>
 <li>{{domxref("Window.history")}} 返回当前会话的history状态</li>
</ul>