History
-
브라우저의 세션 기록에 접근할 수 있는 객체
-
window.history프로퍼티를 통해 History 객체 참조 가능 -
pushState,replaceState메서드를 이용해서 페이지 리 로드 없이url변경이 가능하므로, 주로SPA개발에 사용한다. -
History API로
url을 변경한 후에 새로고침을 하면, 변경된url의 실제 파일을 찾으려고 해서Not Found에러가 발생하는 경우가 있다. -
이를 막기 위해 보통 서버 측에서 모든
url에 대해 같은html파일을 응답하고,routing을 통해 다른 페이지를 보여주게 된다. -
주의할 점은
pushState혹은replaceState메서드를 호출했다고 해서popstate이벤트가 발생하지는 않는다.
Property
history.length
- 현재 페이지를 포함한 세션 기록의 길이를 나타낸다.
history.scrollRestoration
-
기록 탐색 시 스크롤 위치 복원 여부를 선택한다.
-
auto와manual옵션이 있다.
history.state
- 기록 스택 최상단의
state값을 반환한다.
Method
history.pushState(state, title[, url])
-
세션 기록 스택에 새로운 history를 추가한다.
-
state는 새 세션에서 사용할state값을 의미하지만, 자주 사용하지 않는다. -
title은 페이지의title을 변경하지만, 현재Safari를 제외한 브라우저 대부분이title매개변수를 무시한다. -
url은 세션 기록에 새로 추가할url을 넣는다.
history.replaceState(state, title[, url])
-
pushState메서드와 달리 현재history를 수정하며, 세션 기록 스택에 새로운history를 추가하지 않는다. -
주로 이전 페이지로 돌아가는 것을 막을 때 사용.
-
그 외의 모든 기능은
pushState와 동일하다.
참고 자료
History - Web API | MDN
History API - Web API | MDN
popstate - Web API | MDN
