Javascriptista

画面の変更内容を履歴に保存します。
ブラウザの履歴で画面を戻られたときに直近の画面状態を表示させることができます。
SAMPLE

Firefox 12.0	○
Safari 5.0	○
Chrome 19.0	○
I.E. 9.0	×

---

<script>

var data = new Array();

window.onload = function(){
  document.getElementById('next').onclick = save;
}

/**
 * 履歴操作した際に実行するイベント
 */
window.onpopstate = function(event){
  if(!event.state) return;
  data = event.state.input;
  document.forms['testForm'].elements['testText'].value = data[data.length -1];
  updateHistory();
}

/**
 * ブラウザの履歴に追加
 */
function save(){
  var val = document.forms['testForm'].elements['testText'].value;
  data.push(val);
  window.history.pushState({input:data},val, '?input=' + val);
  updateHistory();
}


/**
 * 履歴を更新する。
 */
function updateHistory(){
/**
  var dataString = '';
  for(i=0; i<data.length;i++){
    dataString = dataString +  data[i] + '<br/>';
  }
*/
  document.getElementById('testDiv').innerHTML = data.join('<br/>');
}
</script>

---

1.履歴の戻る・進むを実行されたときに実行されるイベントハンドラです。
履歴ページごとに保存したjavaオブジェクトを取り出し、画面の再現処理をしています。
2.履歴にjavaオブジェクトを保存しています。
history.replaceState()で現在の履歴エントリを更新することもできます。