Revision 934663 of History

<div>{{ APIRef("HTML DOM") }}</div>

<p>The <strong><code>History</code></strong> interface allows to manipulate the browser <em>session history</em>, that is the pages visited in the tab or frame that the current page is loaded in.</p>

<h2 id="Properties">Properties</h2>

<p><em>The <code>History</code></em><em> interface doesn't inherit any property.</em></p>

<dl>
 <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
 <dd>Returns an <code>Integer</code> representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns <code>1</code>.</dd>
 <dt>{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
 <dd>Returns a {{domxref("DOMString")}} representing the URL of the active item of the session history. This property was never available to web content and is no more supported by any browser. Use {{domxref("Location.href")}} instead.</dd>
 <dt>{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
 <dd>Returns a {{domxref("DOMString")}} representing the URL of the next item in the session history. This property was never available to web content and is not supported by other browsers.</dd>
 <dt>{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
 <dd>Returns a {{domxref("DOMString")}} representing the URL of the previous item in the session history. This property was never available to web content and is not supported by other browsers.</dd>
 <dt>{{domxref("History.scrollRestoration")}}&nbsp;{{experimental_inline}}</dt>
 <dd>Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either <code>auto</code> or <code>manual</code>.</dd>
 <dt>{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}</dt>
 <dd>Returns an <code>any</code> value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a {{event("popstate")}} event.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>The <code>History</code></em> <em>interface doesn't inherit any method.</em></p>

<dl>
 <dt>{{domxref("History.back()")}}</dt>
 <dd>Goes to the previous page in session history, the same action as when the user clicks the browser's Back button. Equivalent to <code>history.go(-1)</code>.
 <div class="note"><strong>Note:</strong> Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.</div>
 </dd>
 <dt>{{domxref("History.forward()")}}</dt>
 <dd>Goes to the next page in session history, the same action as when the user clicks the browser's Forward button; this is equivalent to <code>history.go(1)</code>.
 <div class="note"><strong>Note:</strong> Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.</div>
 </dd>
 <dt>{{domxref("History.go()")}}</dt>
 <dd>Loads a page from the session history, identified by its relative location to the current page, for example <code>-1</code> for the previous page or <code>1</code> for the next page. When <code><em>integerDelta</em></code> is out of bounds (e.g. -1 when there are no previously visited pages in the session history), the method doesn't do anything and doesn't raise an exception. Calling <code>go()</code> without parameters or with a non-integer argument has no effect (unlike Internet Explorer, <a class="external" href="https://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx" title="https://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">which supports string URLs as the argument</a>).</dd>
 <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
 <dd>Pushes the given data onto the session history stack with the specified title and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.&nbsp; Note that Firefox currently ignores the title parameter; for more information, see <a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">manipulating the browser history</a>.
 <div class="note"><strong>Note:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} through 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>
 <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
 <dd>Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.&nbsp; Note that Firefox currently ignores the title parameter; for more information, see <a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">manipulating the browser history</a>.
 <div class="note"><strong>Note:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} through 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="Specifications">Specifications</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#the-history-interface", "History")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName("HTML5 W3C")}}.</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>Adds the <code>scrollRestoration</code> attribute.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>scrollRestoration</code></td>
   <td>{{CompatChrome(44.0)}} [1]</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>scrollRestoration</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(44.0)}} [1]</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>{{CompatChrome(44.0)}} [1]</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Behind a flag.&nbsp;</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>The {{domxref("Window.history")}} property returning the history of the current session.</li>
</ul>