html5 해시 및 히스토리 관리

hashchange 이벤트

- hashchange 이벤트는 같은 페이지 안에서 해시(#)만 바뀌었을 때. 즉, 페이지에서 id가 있는 요소로

  이동했을 때 발생합니다.

예) window.addEventListener('hashchange', function(url, callback) { });

pushState()

- 해당 URL의 상태를 저장

- history.pushState(Object statedata, String title, [String url] /*같은 도메인의 웹 페이지*/)

Manipulating the browser history

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

popstate 이벤트

- pushState() 를 사용하여 저장한 상태값을 가져온다.

예) 

history.pushState({data:count}, 'Push State', '#'+count /* URL의 hash 값 index.html#2 */);

$(window).on('popstate', function(event){

if(event.originalEvent.state){

/* URL index.html#2 의 event.originalEvent.state.data값은 2 */

$('h1').text('Count - ' + event.originalEvent.state.data);

}

});

예) ajax 요청을 사용하는 페이지의 뒤로 가기인 경우,

tweeter_search_pushState_popstate.html

history.pushState(data, 'Search-'+ keyword, '#search?keyword='+keyword);

로 상태값을 저장한다.

이후 뒤로 가기를 할 때

if (event.originalEvent.state) {  

event.originalEvent.state.results.forEach(function (item) {

      var output = '';

output += '<h4>' + item.from_user + '</h4>';

output += '<p>' + item.text + '</p>';

output += '<hr />';

$('#content').append(output);

});

}

를 사용하여 ajax를 재요청하지 않는다.