[JS]History API

window 객체에 내장되어 있는 history 객체는 브라우저 세션 기록에 접근할 수 있는 방법을 제공함. 뒤로 가기, 앞으로 가기, 특정 기록으로 가기를 가능하게 해주는 API

 

property로는 length와 state가 있다.

 

아래는 method

방문기록 뒤로 가는 기능

방문기록 앞으로 가는 기능

-2는 두페이지 뒤로, 3은 앞으로 3페이지, 0은 refresh와 같다.

 

세션 기록 스택에 상태를 추가하는 method.

pushState와 replaceState의 차이점은 push는 정말로 스텍에 push를 하는 거고 replace는 pop을 먼저 한 다음 push를 하는 거라 마지막 기록이 기존것에서 새것으로 대체된다는 차이가 있다.

 

첫번째 인자인 state는 원하는 객체를 넣어 popstate 이벤트 속성에서 사용할 수 있게 해준다.

popstate 이벤트는 뒤로가기, 앞으로 가기로 세션이 변경될 때 작동한다.

history.pushState()나 history.replaceState()로 는 발생되지 않는다.

이벤트 객체의 state 속성에 인자로 넣어준 state 객체의 복사본이 들어간다.

 

두번째 인자인 title은 브라우저가 대부분 무시하기 때문에 빈 문자열을 넣는 게 안전하다.

 

세 번째 인자인 url은 상대 url로 지정할 수 있으며 현재 url을 기준으로 사용한다.