---
title: History
slug: Web/API/History
tags:
  - API
  - HTML DOM
  - History API
  - Interface
  - Reference
  - Web
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></p>

<dl>
 <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
 <dd>현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다.</dd>
 <dt>{{domxref("History.scrollRestoration")}}</dt>
 <dd>기록 탐색 시 스크롤 위치 복원 여부를 명시할 수 있습니다. 가능한 값은 <code>auto</code>와 <code>manual</code>입니다.</dd>
 <dt>{{domxref("History.state")}} {{readOnlyInline}}</dt>
 <dd>기록 스택 최상단의 스테이트를 나타내는 값을 반환합니다. {{event("popstate")}} 이벤트를 기다리지 않고 현재 기록의 스테이트를 볼 수 있는 방법입니다.</dd>
</dl>

<h2 id="메서드">메서드</h2>

<p><em><code>History</code> 인터페이스는 어떤 메서드도 상속하지 않습니다.</em></p>

<dl>
 <dt>{{domxref("History.back()")}}</dt>
 <dd>세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드입니다. 브라우저의 <kbd>뒤로 가기</kbd> 버튼을 눌렀을 때, 그리고 <code>history.go(-1)</code>을 사용했을 때와 같습니다.
 <div class="note"><strong>참고:</strong> 세션 기록의 제일 첫 번째 페이지에서 호출해도 오류는 발생하지 않습니다.</div>
 </dd>
 <dt>{{domxref("History.forward()")}}</dt>
 <dd>세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드입니다. 브라우저의 <kbd>앞으로 가기</kbd> 버튼을 눌렀을 때, 그리고 <code>history.go(1)</code>을 사용했을 때와 같습니다.
 <div class="note"><strong>참고:</strong> 세션 기록의 제일 마지막 페이지에서 호출해도 오류는 발생하지 않습니다.</div>
 </dd>
 <dt>{{domxref("History.go()")}}</dt>
 <dd>현재 페이지를 기준으로, 상대적인 위치에 존재하는 세션 기록 내 페이지로 이동하는 비동기 메서드입니다. 예를 들어, 매개변수로 <code>-1</code>을 제공하면 바로 뒤로, <code>1</code>을 제공하면 바로 앞으로 이동합니다. 세션 기록의 범위를 벗어나는 값을 제공하면 아무 일도 일어나지 않습니다. 매개변수를 제공하지 않거나, <code>0</code>을 제공하면 현재 페이지를 다시 불러옵니다.</dd>
 <dt>{{domxref("History.pushState()")}}</dt>
 <dd>주어진 데이터를 지정한 제목(제공한 경우 URL도)으로 세션 기록 스택에 넣습니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 <code>title</code> 매개변수를 무시합니다.</dd>
 <dt>{{domxref("History.replaceState()")}}</dt>
 <dd>세션 기록 스택의 제일 최근 항목을 주어진 데이터, 지정한 제목 및 URL로 대체합니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 <code>title</code> 매개변수를 무시합니다.</dd>
</dl>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Adds the <code>scrollRestoration</code> attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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



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

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><code>History</code> 객체 참조를 반환하는 {{domxref("Window.history")}} 속성.</li>
</ul>