[HTML5] sessionStorageで1ウインドウにつき1回だけ,モバイルWebKit向けのページに誘導する

sessionStorageを見直した



今回はsessionStorageのことについて.localStorageはサイト単位で永続的に保持されますが,sessionStorageはウインドウ単位で揮発するという非常に儚い特製で,使い所がイメージできておりませんでした.

HTML5 SessionStorageの挙動によれば,

  • SessionStorageはほんとにウィンドウごとに異なる。例えばCtrl+Nで開いた新しいウィンドウでは、新しいSessionStorageが生成される。サイトごとに共有されるクッキーとは決定的に異なる。
  • ページをリロードしても、SessionStorageは消えない。
  • window.open()で作成したウィンドウは、元のウィンドウから複製された新しいSessionStorageを持つ。両者は別々のSessionStorageなので、window.open()後にSessionStorageを変更しても、他のSessionStorageには影響を与えません。「タブを複製」などで開いたタブに関しても同様。
  • IFrame内のドキュメントと、親のドキュメントはSessionStorageを共有する。もちろん、IFrameと親ページのドメインが異なれば、別々のSessionStorageとなる。

以上,HTML5 SessionStorageの挙動 - IT-Walker on hatenaより引用

というノリみたいです.(上の記事は,詳細な情報を載せておられるので,ぜひご一読を)

もうちょっと周辺含めて包括的な情報としては,第4回 HTML5関連のデータベースAPIとWeb Storageの基本あたりをご参照のこと.

sessionStorageさんを見直した際の要件

ようは,PCサイトを開いたときのモバイルWebKit向けな,jQuery Mobile実装のサイトへの誘導なんですが,

  • サイトを開いたとき,最初だけ確認してほしい(以後のページ遷移では表示してほしくない)
  • モバイルWebKitのときだけ確認してほしい(PCはどうでもいい)
  • どこからサイト入られても反応させたい(共通動作部分のJSで対応)

という要件を満たします.最初だけ確認して欲しいという所を外すと,1遷移につき1確認と,大変鬱陶しいことに.

素直に考えるとcookieなんだけど

  • cookieだと,意図的に消さない限りブラウザを閉じるまでの賞味期限になる
  • 即ち,一度確認済みになると,新しいウインドウで開いても,confirmされない

が,モバイルSafariが終了されることは,ほとんど無い

そこでsessionStorageですよ

  • sessionStorageなら,ウィンドウが違えば改めて確認が出る
  • 全く新しいウインドウで開いたときには,あらためてcofirmされる.

んで,モバイルWebKitで見たときだけ確認できればいいので,sessionStorageを搭載していないブラウザのことは忘れられます.

よって,採用!

実装コード

ということでこんな実装になりました.

var ua = navigator.userAgent.toLowerCase(),
   loc = location;

if ( window.sessionStorage && sessionStorage.getItem('isConfirmed') !== 'yes' ) {
    sessionStorage.setItem('isConfirmed', 'yes');
    if ( ua.indexOf('applewebkit') !== -1
      && ua.indexOf('mobile') !== -1
      && window.confirm('あなたは AppleWebkit Mobileだったりしますか?') )
    {
        // ページ遷移処理.location.hrefに適切な値を突っ込んだり何だったり.
    }
}

このパターンを流用できる他のケースはあまり無さそうですが,sessionStorage自体は考えようでは面白い使い方ができるのかなー,と副次的に学ぶことが出来ました.ウインドウを複製したときの引き継ぎを,うまく使ってみたい.


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search