브라우저의 History API

브라우저 세션 기록은 History 인터페이스를 통해 관리합니다.

메서드

// 뒤로가기
history.back() 

// 앞으로가기
history.forward() 

// 인덱스로 이동
history.go() 

pushState

새로운 세션을 추가합니다. 새로운 url은 현재 주소를 기준으로 동작합니다.

현재 url: http://foo/indxe.html

history.pushState('','','/bar.html');

현재 url: http://foo/bar.html

브라우저는 bar.html를 로드하거나 bar.html 파일이 있는지 확인하지 않습니다.
즉, 브라우저는 화면을 리로드하지않습니다.
주소창의 url이 변경되고 history 스택에 세션 정보를 추가합니다.
그러나 새로고침할 경우 브라우저가 url 탐색을 시도할 수 있습니다.

이를 응용하면 SPA를 구현할 수 있습니다.

replaceState

현재 세션을 변경할 수 있습니다.

현재 url: http://foo/bar

['http://foo', 'http://foo/bar'] 

history.replaceState('','','bar2')

['http://foo', 'http://foo/bar2']

state

현재 히스토리의 state값을 나타냅니다.
이 값은 새로고침하여도 유지됩니다.