Javascript] HTML5 히스토리 history { pushState, replaceState }

HTML5 에서 추가된 자바스크립트 API 입니다
http://www.w3.org/TR/2011/WD-html5-20110113/history.html

이전 브라우저에서 location.hash 를 사용하여 동적 페이지를 구분 하곤 했습니다
domain.com/#page=100
해시는 서버에 전달되는것이 아니어서 검색엔진이 페이지를 못가져 오는 경우가 많은데요

history 에 추가된 pushState , replaceState 를 사용하면 좀더 나은 결과를 가져 올 수 있습니다
아직까지 이 API 를 좋게 설명한곳이 몇곳 안되더군요..

동적 페이징을 하는데 가장 좋은 결과를 가져오는 history API 를 사용하는 방법 입니다
구현은 자유롭지만 아래 패턴을 따라주어야 합니다

페이지 최초 접속시 API 실행 3번째 인자는 경로 입니다 페이지를 써야 하는경우 [ location.path ]
history.replaceState({data:"이페이지에 저장할 데이터"},"제목","/");
window.onpopstate=function(e){
  alert(e.state);
}

ajax 등의 실행으로 페이지 내용을 변경 하는경우
ajax()
history.pushState({data:"새[현재] 히스토리에 사용할 데이터"},"제목","/경로")

물론 페이지의 변동 사항이 없어도 히스토리는 새로 만들어집니다
위 패턴대로라면 뒤로가기, 앞으로 가기 시에 히스토리 이벤트에는 각각 아래 데이터가 반환 됩니다
/ : {data:"이 페이지에 저장할 데이터"}
/경로 : {data:"새[현재] 히스토리에 사용할 데이터"}