JavaScript History API


SPA과 같이 Ajax를 많이 사용하는 웹 앱의 경우 URL이 자동으로 웹 브라우저의 히스토리에 반영되지 않습니다. 이러한 경우 SPA의 히스토리 및 URL관리를 위해 history API를 사용하게 됩니다.

History API

history 객체

메서드 설명
history.go() 히스토리 내의 특정 페이지로 이동 .go(index)
history.back() 히스토리의 이전 페이지로 이동 .go(-1)과 동일
history.forward() 히스토리의 다음 페이지로 이동 .go(1) 과 동일
history.pushState() 히스토리 스택에 아이템을 추가한다.
history.replaceState() 현재 히스토리 엔트리를 수정한다.
속성
length 객체에 저장된 아이템의 개수를 리턴
이벤트
window.onpopstate 사용자가 히스토리를 이동할 때 발생한다.

사용법 - pushState()

/* pushState - history 객체에 새로운 엔트리를 추가한다 */
// @param {object} state - 히스토리의 각 아이템에 저장된 정보
// @param {string} title - 페이지의 제목을 변경
// @param {string} url - 브라우저에 보일 페이지의 URL을 전달
history.pushState(state, title, url);
SHARE