初回アクセス時だけ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.
おわり！