브라우저 히스토리 조작하기

DOM의 window 객체는 history 객체를 통해 브라우저 히스토리에 접근할 수 있습니다. HTML5의 history 객체는 사용자 히스토리에서의 앞 뒤 이동이 가능하도록 유용한 메서드와 속성들을 제공하며, history stack의 내용을 조작할 수 있게 합니다.

히스토리 내 이동

back(), forward(), 그리고 go() 메서드 등을 이용하여 사용자 히스토리에서 앞 뒤 이동이 가능합니다.

앞으로 가기와 뒤로 가기

히스토리에서 뒤로 가기 위해서는 아래 명령어를 실행합니다:

window.history.back();

이 명령어의 실행결과는 사용자가 브라우저 툴바에서의 뒤로 가기 버튼(Back button)을 클릭한 것과 동일합니다.

이와 비슷하게, 아래 명령어를 실행하여 히스토리에서 앞으로 갈 수 있습니다. (마치 브라우저 툴바의 Forward button의 역할):

window.history.forward();

히스토리에서 특정 위치로 가기

go() 메서드를 이용하여 session history에서 특정 페이지를 불러 올 수 있습니다. 그 특정 페이지는 현재 페이지의 위치에 기준하여 상대적인 위치 정보를 갖습니다. (현재 페이지의 상대적인 index는 0이 됩니다.)

back() 메서드를 사용한 효과처럼, 한 페이지 뒤로 가기 위해서는 아래 명령어를 실행합니다:

window.history.go(-1);

forward() 메서드처럼 한 페이지 앞으로 가기 위해서는 아래 명령어를 실행합니다:

window.history.go(1);

유사한 방식으로, 두 페이지를 앞으로 가거나 뒤로 가는 것이 가능합니다.

히스토리 스택의 length 속성을 이용하여 페이지가 몇 페이지로 구성되어 있는지 알 수 있습니다.

var numberOfEntries = window.history.length;
참고: 인터넷 익스플로러는 (IE) URL 문자열을 go() 메서드의 변수로 넘기는 것을 지원합니다. 이 것은 표준방식이 아니며, Gecko에서 지원이 되지 않습니다.

히스토리 엔트리의 추가 및 변경

HTML5는 사용자가 히스토리 엔트리를 추가하거나 변경할 수 있는 history.pushState()history.replaceState() 메서드를 제공합니다. 이 메서드들은 window.onpopstate 이벤트와 연동하여 동작합니다.

history.pushState()로 상태를 변경하면 XMLHttpRequest를 참조하도록 HTTP 헤더에 위치하는 참조자가 변경됩니다. 참조자는 XMLHttpRequest 객체가 생성되는 시점에 this로 지정되는 도큐먼트의 URL입니다.

pushState() 메소드 예제

http://mozilla.org/foo.html 에서 다음 자바스크립트를 실행한다고 가정합시다.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

실행결과는 주소창에 http://mozilla.org/bar.html를 표시하지만, 브라우저는 bar.html 불러오지도 않으면 심지어 bar.html 파일의 존재유무를 확인하지도 않습니다.

사용자가 이제 http://google.com에 접속했다가 뒤로 가기 버튼을 클릭한다고 가정합시다. 이 시점에서, URL의 주소는 http://mozilla.org/bar.html를 가리킬 것이고, 웹 페이지는 popstate 이벤트를 발생시켜 위에서 저장한 stateObj의 복사본을 가져옵니다. 이 페이지는 foo.html처럼 보이지만, 페이지의 내용은 popstate 이벤트 과정중에 변경되었을 수도 있습니다.

만약 우리가 뒤로 가기 버튼을 다시 누르면, URL은 http://mozilla.org/foo.html 로 변경되고, 문서(document)는 또 다른 popstate 이벤트를 발생시키고, 이번에는 null state 객체를 얻습니다. 여기서도 역시, 뒤로 가는 것 자체가 다큐멘트의 내용을 바꾸진 않습니다. 문서는 popstate 이벤트 과정중에 수동으로 변경할 수 있습니다. (번역 주, 이 내용은 콘솔 창에서 window.history를 입력하여 state 속성이 stateObj이나 null로 변경되는 것으로 확인할 수 있습니다.)

pushState() 메소드

pushState()는 세개의 변수를 가집니다: state 객체, title(예약되어 있으나 내부 역할 없음), 그리고 옵션인 URL. 이 변수들에 대해 상세히 알아봅니다:

  • state 객체pushState()에 의해 생성된 새로운 히스토리 항을 포함하고 있는 자바스크립트 객체입니다. 사용자가 새로운 상태로 이동할 때 마다, popstate 이벤트가 발생하고, 이 이벤트의 state 속성은 히스토리의 state객체 사본을 가집니다.

    state 객체는 직렬화할 수 있는 어떤 것도 될 수 있습니다. Firefox는 state 객체들을 사용자의 디스크에 저장하며, 그 state 객체들은 사용자가 브라우저를 재시작 하여도 다시 사용할 수 있습니다. state 객체의 직렬화 결과 크기는 최대 640k로 제한됩니다. 만약 사용자가 더 큰 직렬 표현 데이타를 pushState()로 보낸다면, 메소드는 예외를 발생시킵니다. 만약 사용자가 이 보다 더 큰 공간이 필요하면 sessionStoragelocalStorage를 사용하십시오.

  • title — Firefox 는 현재 이 변수를 무시합니다. 나중에 사용될 수도 있기 때문에 빈 문자열을 지정해 놓는 것은 안전합니다. 빈 문자열 대신 이동하고자 하는 state 마다 짧은 명칭을 부여하는 것도 좋습니다.

  • URL — 새로운 히스토리 엔트리의 URL을 지정합니다. pushState() 호출 이후에는 브라우저가 이 URL을 로딩하지 않는 것을 명심하시기 바랍니다. 하지만 아마 나중에도 사용될 수 있습니다, 예를 들면, 사용자가 브라우저를 다시 시작했을 때처럼 말이죠. 새롭게 할당되는 URL은 현재의 URL에 기준하기 때문에, 절대 경로일 필요는 없습니다. 새로운 URL은 기존의 URL을 기준으로 해석됩니다. 새로운 URL은 현재 URL에서 유추될 수 없다면 pushState()는 예외를 발생시킵니다. 이 변수는 선택 사항으로, 명시되지 않는다면, 현재 URL로 지정됩니다.

참고: Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)에서 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)까지, JSON을 이용하여 직렬화하였습니다. Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)부터는 the structured clone algorithm을 이용하여 직렬화 합니다. 이 방법은 더 다양한 상황의 객체를 안전하게 직렬화 할 수 있습니다.

pushState() 함수 실행은 window.location = "#foo"를 실행하는 것과 비슷한 측면이 있습니다. 두 실행 모두 현재 다큐멘트에 연관되어 있는 또다른 히스토리 엔트리를 생성하고 활성화합니다. 하지만 pushState()를 사용하면 다음과 같은 장점이 있습니다.

  • pushState() 함수로 새롭게 생성된 URL은 현재 URL에 기준합니다. 이와는 반대로, window.location은 해쉬 값을 변경한 경우에만 같은 document에 머무릅니다.
  • 만약 URL 변경이 싫다면, 변경하지 않아도 됩니다. 반대로, window.location = "#foo";는 현재 해쉬 값이 #foo이 아닌 경우에만 새로운 히스토리 항목을 생성합니다.
  • 새로운 히스토리 항에 임시 데이터를 엮어 사용할 수도 있습니다. 해쉬에 기준한 접근방식은, 사용자가 각각의 데이터를 짧은 문자열 지정해 두어야 합니다.
  • 향후 title 속성이 활용될 수도 있습니다. (해쉬와는 별개로)

만약 새로운 URL과 이전 URL의 주소가 다를지라도, hash 값이 동일하면 pushState()는 절대 hashchange 이벤트를 발생시키지 않습니다.

XUL 문서에서는, 특정한 XUL 요소가 생성됩니다.

다른 다큐멘트에서는, null 네임스페이스 URI를 가진 요소가 생성됩니다.

replaceState() 메소드

history.replaceState()history.pushState()와 동일하게 동작합니다. 다만, replaceState()는 새로운 히스토리를 하나 생성하는 대신에 현재의 히스토리 엔트리를 변경합니다. 하지만 전역 브라우저 히스토리에 새로운 항목을 추가하는 것을 막지는 않습니다.

replaceState() 는 state 객체나 사용자의 동작에 따라 현재 히스토리 엔트리의 URL을 업데이트 하려고 할 때 매우 유용합니다.

참고: Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)에서 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)까지, JSON을 이용하여 직렬화하였습니다. Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)부터는 the structured clone algorithm을 이용하여 직렬화 합니다. 이 방법은 더 다양한 상황의 객체를 안전하게 직렬화 할 수 있습니다.

replaceState() 메소드 예제

http://mozilla.org/foo.html에서 다음 자바스크립트를 실행한다고 가정해 봅시다:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

위 두 줄의 코드 설명은 "pushState() 메소드 예제" 부분에 설명되어 있습니다. http://mozilla.org/bar.html에서 다음 자바스크립트를 수행합니다:

history.replaceState(stateObj, "page 3", "bar2.html");

실행 결과 주소창의 내용이 http://mozilla.org/bar2.html으로 변경되나, 브라우저가 bar2.html를 불러 온것은 아니고, 심지어 bar2.html가 있는지도 확인하지 않습니다.

이제 http://www.microsoft.com으로 이동하였다가, 뒤도 가기 버튼을 이용해 돌아옵니다. 이시점에서 주소창에는 http://mozilla.org/bar2.html이 표시됩니다. 뒤로가기를 재차 수행하면 주소창에 http://mozilla.org/foo.html이 표시됩니다. bar.html 항은 완전히 건너뛰게 됩니다.

popstate 이벤트

popstate 이벤트는 현재 활성화된 히스토리 엔트리에 변화가 있을 때 마다 실행됩니다. 만약 pushState 함수나 replaceState 함수에 의해 현재 활성화되어 있는 히스토리 엔트리가 조작 및 변경된다면, popstate 이벤트의 state 속성은 히스토리 항의 state 객체의 사본이 됩니다.

사용법은 window.onpopstate을 참고하십시오.

현재 상태 읽기

페이지가 로딩이 되었을 때, state 객체는 아마 null이 아닐 수 있습니다. 이것은, 예를 들어, 페이지가 pushState()replaceState()를 이용하여 state 객체를 설정한 상태에서 브라우저를 재시작했을 때 가능합니다. 페이지를 다시 불렀을 때, onload 이벤트가 페이지에 들어가고, popstate는 호출되지 않습니다. 그러나, history.state 속성에 접근하면, state 객체는 마치 popstate 발생시에 얻었을 객체와 동일하게 될 것입니다.

popstate 이벤트를 기다릴 필요 없이, 아래와 같은 명령어를 이용하여 현재 히스토리 엔트리의 상태에 접근할 수 있습니다.


var currentState = history.state;

예제

AJAX 웹 사이트의 완성된 예제를 보고 싶다면, 이 링크를 참고합니다: Ajax navigation example.

명세표

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'History' in that specification.
Living Standard No change from HTML5.
HTML5
The definition of 'History' in that specification.
Recommendation Initial definition.

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
replaceState, pushState 5 4.0 (2.0) 10 11.50 5.0
history.state 18 4.0 (2.0) 10 11.50 6.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
replaceState, pushState ? ? ? ? ?
history.state ? ? ? ? ?

참고 문서

문서 태그 및 공헌자

 이 페이지의 공헌자: danhojin, joshua1988
 최종 변경: danhojin,