WebStorageAPIを使って初回アクセス時だけLoadingを表示する

初回アクセス時だけLoadingを表示するために、
WebStorageAPIを使ってみたまとめ

WebStorageAPIって何？

Web Storage API は、Cookie を使用するよりも直感的な方法で、ブラウザがキーと値のペアを保存できる仕組みを提供します。

ブラウザに何やらデータが保存しておけるという仕組みらしい。

sessionStorageとlocalStorage

sessionStorageとlocalStorageの2種類のストレージが用意されている。

種類	別ウィンドウ（タブ）	保存期間
sessionStorage	NG	ブラウザを閉じるまで
localStorage	OK	永久

データのセットと取得

今回はブラウザを閉じたら再度Loadingを表示させたいので、
sessionStorageを使うことにします。

具体的な使い方としては、
sessionStorage.setItemを使ってデータをセット、
sessionStorage.getItemを使ってデータを取得します。

sessionStorage.setItem

# keyとvalueを使ってデータをセット
sessionStorage.setItem('key', 'value');

sessionStorage.getItem

# keyを指定してデータを取得
sessionStorage.getItem('key');

初回アクセス時判定

ブラウザに保存されたデータで、初回アクセスの判定をします。
データが保存されていれば2回目以降のアクセスになり、
データが保存されていなければ初回アクセスという事になります。

See the Pen WebStorage by kayukihashimoto (@kfunnytokyo) on CodePen.

初回アクセス時だけLoadingを表示する

あとはLoadingで表示させたいテキスト、アニメーションを用意して、
cssで調節すればOK。

これで初回アクセス時だけLoadingを表示する事が出来ました。

See the Pen WebStorage by kayukihashimoto (@kfunnytokyo) on CodePen.

おわり！