[HTML5] sessionStorageで1ウインドウにつき1回だけ，モバイルWebKit向けのページに誘導する
Posted: Updated:
sessionStorageを見直した
今回はsessionStorageのことについて．localStorageはサイト単位で永続的に保持されますが，sessionStorageはウインドウ単位で揮発するという非常に儚い特製で，使い所がイメージできておりませんでした．
- SessionStorageはほんとにウィンドウごとに異なる。例えばCtrl+Nで開いた新しいウィンドウでは、新しいSessionStorageが生成される。サイトごとに共有されるクッキーとは決定的に異なる。
- ページをリロードしても、SessionStorageは消えない。
- window.open()で作成したウィンドウは、元のウィンドウから複製された新しいSessionStorageを持つ。両者は別々のSessionStorageなので、window.open()後にSessionStorageを変更しても、他のSessionStorageには影響を与えません。「タブを複製」などで開いたタブに関しても同様。
- IFrame内のドキュメントと、親のドキュメントはSessionStorageを共有する。もちろん、IFrameと親ページのドメインが異なれば、別々のSessionStorageとなる。
というノリみたいです．（上の記事は，詳細な情報を載せておられるので，ぜひご一読を）
もうちょっと周辺含めて包括的な情報としては，第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自体は考えようでは面白い使い方ができるのかなー，と副次的に学ぶことが出来ました．ウインドウを複製したときの引き継ぎを，うまく使ってみたい．
