window.history.pushState / window.history.replaceState

페이지 reload 하지 않고 브라우저의 url만 바꿔주는 작업을 할 때 쓰는 함수이다.

    window.history.pushState(null, null, '경로값')

 

첫번째 인자 값에 브라우저로 넘겨줄 데이터.

두번째 인자 값은 브라우저 제목으로 설정할 값.

세번째 인자 값은 url바꿔줄 해당 경로 값.

 

브라우저 앞 / 뒤 버튼 클릭시 onPopState라는 함수 실행되고,

onPopState 함수에서 state 데이터를 넘겨준다고 함.

 

history.pushState

=> 이전 url의 주소가 남아있어서 브라우저의 뒤로가기 버튼이 활성화된다.

 

history.replaceState

=> 동일한 기능이지만, 이전 url의 주소를 활성화하지 않기 때문에 뒤로가기 버튼 활성화 되지 않음.