---
title: History.replaceState()
slug: Web/API/History/replaceState
translation_of: Web/API/History/replaceState
---
<div>{{APIRef("History API")}}</div>

<div></div>

<p><strong><code>History.replaceState()</code></strong> 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 <code>stateObj</code>, <code>title</code>, <code>URL</code>로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history의 URL을 업데이트하려는 경우에 유용합니다. </p>

<h2 id="구문">구문</h2>

<pre class="syntaxbox">history.replaceState(<em>stateObj</em>, <em>title</em>[, <em>url</em>])</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>stateObj</code></dt>
 <dd>state 객체는 <code>replaceState</code>에 전달된 history 항목과 연관된 JavaScript 객체입니다. state object는 <code>null</code>일 수 있습니다.</dd>
 <dt><code>title</code></dt>
 <dd>나중에는 사용할 수도 있지만, <a href="https://github.com/whatwg/html/issues/2174">대부분의 브라우저는 현재 이 파라미터를 무시하고 있습니다.</a> 이 부분에 빈 String을 전달하면 나중에 메소드가 변화하더라도 안전합니다. 또는, state에 짧은 title을 전달할 수도 있습니다.</dd>
 <dt><code>url</code> {{optional_inline}}</dt>
 <dd>history 항목의 URL 입니다. 새 URL은 현재 URL과 출처가 동일해야(same origin)합니다. 그렇지 않으면 replaceState에서 예외가 발생합니다.</dd>
</dl>

<h2 id="예제">예제</h2>

<p>https://www.mozilla.org/ 에서 아래 JavaScript를 실행한다고 가정합시다: </p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const </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>위 두 줄에 대한 설명은 <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a> 문서의 <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API#Example_of_pushState_method">Example of <code>pushState()</code> method</a>에서 확인할 수 있습니다. 그 다음, <span class="nowiki">https://www.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">https://www.mozilla.org/bar2.html이라고 표시되지만</span>, 브라우저가 <code>bar2.html<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">을 로드하거나 </span></font></code><code>bar2.html</code>파일이 있는지 확인하지는 않습니다.</p>

<p>이제 사용자가 <span class="nowiki">https://www.microsoft.com으로 이동한 다음</span>, 뒤로가기 버튼을 누른다고 가정해봅시다. 이 때, URL 표시줄에는<span class="nowiki">https://www.mozilla.org/bar2.html이 표시됩니다. 사용자가 다시 뒤로가기 버튼을 누르면, URL 표시줄에는 https://www.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", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>{{SpecName("HTML5 W3C")}} 이후 변화 없음.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>초기 정의.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



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