シングルページアプリケーションの履歴管理はpushState/replaceState/popstateで実施する

JavaScript

シングルページアプリケーション

ajaxを利用して画面遷移させずに必要な部分だけ書き換えていく方式のアプリケーションをシングルページアプリケーションというらしいです。

 

で、これBrowser BackとかBrowser forwardしたときの挙動をどうなるのかな？って思っていたのですが解決方法があるようです。それにはjavascriptのMethodを使います。

 

pushState/replaceState/popstate

Browserでは、pushState という javascript の Method で URLを起点とした履歴管理が出来るようです。

 

似たような javascript の Method で replaceState、popstate というのがあるらしいです。それぞれ、次の３つの引数を持ち履歴状態を管理します。

  1. state
    2. 状態ですね。Keyを指定しても良いし、対象状態のObjectをそのまま保持させてしまってもいいかもしれません。

  2. title
    3. ページのタイトルになります。

  3. url
    4. ページのURLになります。

 

次回の記事更新では手を動かして動作確認していきたいと思います。