---
title: History.pushState()
slug: Web/API/History/pushState
tags:
  - API
  - HTML DOM
  - Web
  - метод
translation_of: Web/API/History/pushState
---
<p>{{APIRef("DOM")}}</p>

<p>В <a href="/en-US/docs/Web/HTML">HTML</a> документе метод <strong><code>history.pushState()</code></strong> добавляет новое состояние в историю браузера</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre>history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>])
</pre>

<h3 id="Параметры">Параметры</h3>

<p><strong>state object</strong> </p>

<dl>
 <dd>Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной <code>pushState()</code>. Всякий раз, когда пользователь переходит к новому состоянию, происходит событие <code>popstate</code>, а свойство <code>state</code> этого события содержит копию объекта состояния с записями истории.</dd>
 <dd>Объект состояния может быть чем угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод <code>pushState()</code> выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование <code>sessionStorage</code> и/или <code>localStorage</code>.</dd>
</dl>

<dl>
 <dt><strong>title</strong></dt>
 <dd>Заголовок - <a href="https://github.com/whatwg/html/issues/2174">все браузеры, кроме Safari, на данный момент игнорируют этот параметр</a>, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояния, в которое переходите.</dd>
</dl>

<dl>
 <dt><code>url</code> {{optional_inline}}</dt>
 <dd>Через этот параметр передаётся URL-адрес новой записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова <code>pushState()</code>, но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе <code>pushState()</code> выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.</dd>
</dl>

<h2 id="Описание">Описание</h2>

<p>Вызов <code>pushState()</code> в некоторой степени похож на установку <code>window.location = "#foo"</code>, поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.</p>

<p>Но у <code>pushState()</code> есть несколько преимуществ:</p>

<ul>
 <li>Новый URL может быть любым в пределах того же домена, порта и протокола, что и текущий адрес. Тогда как настройка <code>window.location</code> оставляет вас на том же {{ domxref("document") }} лишь в том случае, если вы меняете только хэш</li>
 <li>Менять URL не обязательно. Тогда как настройка <code>window.location = "#foo";</code> создаёт новую запись в истории, только если текущий хеш не <code>#foo</code></li>
 <li>С новой записью в истории можно связать любые данные. В подходе, основанном на хеше, все соответствующие данные нужно кодировать в короткую строку</li>
 <li>Если заголовок <code>title</code> впоследствии используется браузерами, эти данные могут быть использованы (независимо от, скажем, хеша).</li>
</ul>

<p>Обратите внимание, что <code>pushState()</code> никогда не вызывает событие <code>hashchange</code>, даже если новый URL отличается от старого только хешем.</p>

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

<p>Создание новой записи истории браузера, задавая <em>state</em>, <em>title</em>, и <em>url</em>.</p>

<h3 id="JavaScript">JavaScript</h3>

<pre>const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'

history.pushState(state, title, url)</pre>

<h2 id="Спецификации">Спецификации</h2>

{{Specifications}}

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{Compat}}</p>

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

<ul>
 <li><a href="/ru/docs/Web/API/History_API/Working_with_the_History_API">Работа с History API</a></li>
</ul>