---
title: History API
slug: Web/API/History_API
tags:
  - API
  - DOM
  - HTML5
  - История
translation_of: Web/API/History_API
---
<p>{{DefaultAPISidebar("History API")}}<br>
 DOM-объект {{DOMxRef("Window")}} предоставляет доступ к истории текущей сессии браузера (не путать с <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history">историей браузерных расширений</a>) через объект {{DOMxRef("Window.history","history")}}. Он предоставляет полезные методы и свойства, которые позволяют переходить назад и вперёд по истории пользователя и манипулировать её содержимым.</p>

<h2 id="Понятия_и_использование">Понятия и использование</h2>

<p>Перемещение назад и вперёд по истории пользователя выполняется с помощью методов {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}, и {{DOMxRef("History.go","go()")}}.</p>

<h3 id="Перемещение_вперёд_и_назад">Перемещение вперёд и назад</h3>

<p>Чтобы переместиться назад по истории:</p>

<pre class="brush: js notranslate">window.history.back();
</pre>

<p>Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.<br>
 Похожим образом можно переместиться вперед (как если бы пользователь нажал на кнопку "Вперед"):</p>

<pre class="brush: js notranslate">window.history.forward();
</pre>

<h3 id="Перемещение_к_определённой_странице_в_истории">Перемещение к определённой странице в истории</h3>

<p>Вы можете использовать метод {{DOMxRef("History.go","go()")}} для загрузки конкретной страницы из истории сессии, определяемой её позицией относительно текущей страницы. Относительная позиция текущей страницы равняется <code>0</code>.</p>

<p>Вернуться на одну страницу назад (равноценно вызову {{DOMxRef("History.back","back()")}}):</p>

<pre class="brush: js notranslate">window.history.go(-1);
</pre>

<p>Перейти на одну страницу вперёд (равноценно вызову {{DOMxRef("History.forward","forward()")}})</p>

<pre class="brush: js notranslate">window.history.go(1);
</pre>

<p>По такому же принципу, можно перемещаться вперед на 2 страницы, передавая аргумент <code>2</code>, и так далее.</p>

<p>Кроме того, метод <code>go()</code> можно использовать для обновления текущей страницы, передавая аргумент <code>0</code> или вызывая его без аргументов:</p>

<pre class="notranslate">// Обе следующих инструкции обновляют текущую страницу
window.history.go(0)
window.history.go()</pre>

<p>Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства <code>length</code>:</p>

<pre class="brush: js notranslate">var numberOfEntries = window.history.length;
</pre>

<h2 id="Интерфейсы">Интерфейсы</h2>

<dl>
 <dt>{{domxref("History")}}</dt>
 <dd>Позволяет манипулировать историей сессии браузера (то есть, страницами, посещёнными в той же закладке, что и текущая страница.</dd>
</dl>

<h2 id="Примеры">Примеры</h2>

<p>В следующем примере свойству <code>onpopstate</code> назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замени и перемещения по истории текущей вкладки браузера</p>

<pre class="notranslate">window.onpopstate = function(event) {
  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
}

history.pushState({page: 1}, "title 1", "?page=1")
history.pushState({page: 2}, "title 2", "?page=2")
history.replaceState({page: 3}, "title 3", "?page=3")
history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // alerts "location: http://example.com/example.html, state: null"
history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"</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', "browsers.html#history", "History")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Нет изменений по сравнению с {{SpecName("HTML5 W3C")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

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

<h2 id="Смотрите_также">Смотрите также</h2>

<h3 id="Справочники">Справочники</h3>

<ul>
 <li>{{ domxref("window.history") }}</li>
 <li>{{ domxref("window.onpopstate") }}</li>
</ul>

<h3 id="Руководства">Руководства</h3>

<ul>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
</ul>