1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
---
title: History API
slug: Web/API/History_API
tags:
- API
- Advanced
- DOM
- History
- 기록
- 브라우저 히스토리
- 히스토리
translation_of: Web/API/History_API
---
<div>{{DefaultAPISidebar("History API")}}</div>
<p>DOM의 {{domxref("Window")}} 객체는 {{domxref("Window.history", "history")}} 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. {{domxref("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">history.back()</pre>
<p>위의 코드는 사용자가 브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같습니다.</p>
<p>이와 비슷하게, 기록의 앞으로 (도구 모음의 앞으로 가기 버튼) 가는 것도 할 수 있습니다.</p>
<pre class="brush: js">history.forward()</pre>
<h3 id="기록의_특정_지점으로_이동">기록의 특정 지점으로 이동</h3>
<p>{{domxref("History.go", "go()")}} 메서드를 사용하면 세션 기록에서 현재 페이지의 위치를 기준으로, 상대적인 거리에 위치한 특정 지점까지 이동할 수 있습니다.</p>
<p>한 페이지 뒤로 이동하려면 다음과 같이 사용합니다. ({{domxref("History.back", "back()")}}과 동일)</p>
<pre class="brush: js">history.go(-1)</pre>
<p>한 페이지 앞으로 이동하려면 다음과 같이 사용합니다. ({{domxref("History.forward", "forward()")}}와 동일)</p>
<pre class="brush: js">history.go(1)</pre>
<p>매개변수로 지정한 숫자를 바꾸면 2 페이지씩 이동하는 것도 가능합니다.</p>
<p><code>go()</code>의 다른 사용법은 매개변수를 제공하지 않거나 0을 제공해 현재 페이지를 다시 불러오는 것입니다.</p>
<pre class="brush: js">// The following statements
// both have the effect of
// refreshing the page
history.go(0)
history.go()</pre>
<p>{{domxref("History.length", "length")}} 속성을 사용해 방문 기록 스택의 크기도 알아낼 수 있습니다.</p>
<pre class="brush: js">let numberOfEntries = window.history.length</pre>
<h2 id="인터페이스">인터페이스</h2>
<dl>
<dt>{{domxref("History")}}</dt>
<dd>브라우저의 세션 기록에 접근할 수 있는 방법을 제공하는 인터페이스입니다.</dd>
</dl>
<h2 id="예제">예제</h2>
<p>다음 예제는 {{domxref("window.onpopstate")}} 속성에 이벤트 처리기를 부착한 후, {{domxref("window.history", "history")}} 객체를 사용해 브라우저 방문 기록을 추가하거나 대체한 후 탐색하는 코드입니다.</p>
<pre class="brush:js line-numbers language-js">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">
<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#history", "History")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>No change from {{SpecName("HTML5 W3C")}}.</td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "browsers.html#history", "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>{{domxref("window.history")}}</li>
<li>{{domxref("window.onpopstate")}}</li>
</ul>
|
