History APIで履歴に状態を記録する

SPA（Single Page Application）のようにタブやボタンなどで表示するコンテンツを切り替えることで1つのページが複数ページあるように振る舞ったり、スクロールすると自動で続きのコンテンツを読み込んで表示する商品リスト、などを見たことがある方も多いと思います.

これは便利ではあるのですが、そのままだとページの状態（後から追加したコンテンツや切り替えたコンテンツ）は記録されていないため、例えば違うページに移動して「戻る」ボタンでページバックするとページは最初の状態に戻っています。

最後に見ていた内容と違っているので「ん？？」となってしまい、ユーザー体験(UX)も好ましくありません。

History APIを使うことでこれらの問題は解決できます。

TOC

pushStateで状態を記録する

pushStateは「新しい履歴エントリの作成」を行い、そこに関連づけるオブジェクトを記録します。

pushStateの基本は下記

history.pushState( state , title , url );

state には、｛ foo : “hoge”　, bar: hage ｝の形で任意の状態を複数セットできます。

たとえば、

 myState = {
   title = 'SAMPLE',
   html = document.getElementById('hoge').innerHTML
 }
 〜〜〜
 history.pushState( myState, null, url)

のようにページタイトルとHTMLをstateにセットしておいて、戻るボタンがクリックされたときにその状態を呼び出す　ように使います。

執筆時時点でtitle の値を利用しているブラウザがほぼないので、nullをセット。

url は、URLバーに表示するURLを指定します。絶対URLでも相対URLでも可。

誤解してはいけないのは、ここで指定したURLは表示目的なだけで、location.href=url のように指定したURLに移動するわけではありません。URLの検証もされません。架空のURLを表示させても問題ありません。悪い使い方はしないようにしましょう。

戻る・進むボタンなどでアクティブな履歴エントリが変更されるたびに、window はpopstateイベントを発行します。

そこで、pushStateで記録したオブジェクトを呼び出して

// 戻る（すすむ）と、stateに保存されていたtitleの値でページタイトルを書き換える
window.addEventListener('popstate', function(e) {
      document.title = e.state.title;
    }, false);

のように利用できます。

ただしブラウザによっては、初回アクセス時にpopstateが発火して予期せぬ動きをしたりするので、stateの有無を判別させます。

  window.addEventListener('popstate', function(e) {
      if(e.state){
        // 
      }
    }, false);