[javascript HTML5] Q. 動的にブラウザの履歴を変化させる

A. HTML5では再読込を行わないサイトでも個別リンク(permalink)を設定したり、
ブラウザのバックボタンで戻れるようにする為に
ブラウザの履歴やロケーション表示の操作が行えます。

ブラウザの履歴に追加するには
  window.history.pushState(DATA, TITLE, [URL]);
を利用します。

ブラウザのヒストリーが呼ばれた時に呼び出されるイベント
// eventListener style
window.addEventListener("popstate", function(event) {

},false );

// on style
onpopstate = function(event) {

}
event.stateに設定したデータが入っています。
設定したデータもしくはクエリーストリングから
ページの表示内容を適切に変更する事で
AJAXを利用した動的なサイトでも通常ページのような
使い勝手が実現可能です。

var now = 1;

document.addEventListener("DOMContentLoaded", function(){
  // query
  var query = window.location.search;
  var hash = window.location.hash;
  query.match(/^\?n=(\w*)/);
  now = RegExp.$1;
  document.getElementById('now').innerHTML = now;

  // add pushState
  document.getElementById('push').addEventListener("click", function(){
    now++;
    history.pushState(now, document.title, '?n=' + now);
    document.getElementById('now').innerHTML = now;
  }, false);

  // eventListener style
  //window.addEventListener("popstate", function(event) {
  //},false );

  // on style
  onpopstate = function(event) {
    console.log(event);
    if( event.state != null){
      document.getElementById('now').innerHTML = event.state;
      now = event.state;
    }else{
      var query = window.location.search;
      query.match(/^\?n=(\w*)/);
      now = RegExp.$1;
      document.getElementById('now').innerHTML = now;
    }
  }
}, false);


参考サイト:
MDN Manipulating the browser history