history.pushState 사용하기

페이지를 reload하지 않고 url만 변경해야 할 경우 사용한다.

var state = { 'page_id': 1, 'user_id': 5 }; 
var title = 'Hello World';
var url = 'hello-world.html'; 
history.pushState(state, title, url);

state = 상태 값을 나타내는 것으로 브라우저에서 앞/ 뒤로 갈 때, 넘겨줄 데이터

title = 변경할 브라우저 제목 (변경을 원하지 않으면 null) 

url = 변경할 브라우저 URL

window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
}

브라우저에서 뒤/앞으로 가는 버튼 클릭 시 onpopstate 이벤트가 발생하며 이때, 콜백함수에서 event.state는 pushState 함수의 인자 값이였던 state 객체가 넘어온 것이다.

-참고 자료

https://slipp.net/wiki/display/SLS/pushstate

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method