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

2021.10.23

ajaxを使って、１つのページ上で表示するコンテンツを切り替えたり、自動で続きのコンテンツを読み込んで表示する などよくあります

ネットショップでいえば、無限ロードで商品を読み込んでいくショップは多く見かけます。

しかしそのままだとajaxで読み込んだコンテンツは記録されないため、例えば違うページに移動して戻るボタンで戻ってみるとページは初期状態に戻っています。

もし最後のコンテンツまで読み込んでいたとすると、いちから読み込み直しとなりユーザー体験上も好ましくありません。

History APIを使えば、これらの問題は解決できます。

pushStateで状態を記録する

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

pushStateの基本は下記

history.pushState( state , title , url );

stateに状態をセット

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

たとえば、

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

 // もちろん、history.pushState( {title:'SAMPLE', ...} , null , url )　の書き方でも良い

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

title は今のところサポートされていない

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

url には表示させるURLをセット

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

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

popstateイベントでpushStateのオブジェクトを利用する

戻る・進むボタンなどでアクティブな履歴エントリが変更されるたびに、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);
タイトルとURLをコピーしました