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