History API

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

앞으로 가기와 뒤로 가기

뒤로 가기

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);

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

window.history.go(3); // 3페이지 앞으로 이동
window.history.go(-2); // 2페이지 뒤로 이동

히스토리 스택의 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() 메소드

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

• state 객체 — pushState()에 의해 생성된 새로운 히스토리 항을 포함하고 있는 자바스크립트 객체입니다.
  사용자가 새로운 상태로 이동할 때 마다, popstate 이벤트가 발생하고,
  이 이벤트의 state 속성은 히스토리의 state 객체 사본을 가집니다.
  state 객체는 직렬화할 수 있는 어떤 것도 될 수 있습니다.
  Firefox 는 state 객체들을 사용자의 디스크에 저장하며,
  그 state 객체들은 사용자가 브라우저를 재시작 하여도 다시 사용할 수 있습니다.
  state 객체의 직렬화 결과 크기는 최대 640k 로 제한됩니다.
  만약 사용자가 더 큰 직렬 표현 데이타를 pushState()로 보낸다면, 메소드는 예외를 발생시킵니다.
  만약 사용자가 이 보다 더 큰 공간이 필요하면 sessionStorage 나 localStorage 를 사용하십시오.
  

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

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

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 을 업데이트 하려고 할 때 매우 유용합니다.

popstate 이벤트

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