2023/01/24 追記
「sessionStorage」の場合、別タブで開いた時にデータを渡せないことに気がついたので「localStorage」での方法をおすすめします🙇♀️ （今度記事直しておきます！）
Webサイトのコーディングをしていると、ローディングを表示させたいという要件はわりとあります。
ページ数の少ないホームページなどであればページ読み込みの度にローディングが表示されても気になりませんが、メディアサイトなどだと毎回はちょっと邪魔に感じます。
こちらの記事では、初回アクセス時のみローディングを表示させたい！というときに使えるコードをご紹介します。
※
「初回アクセス時に処理を実行させる」というものなので、ローディング以外でも応用できます
目次
概要｜JavaScriptを使って初回アクセス時のみ処理を実行させる
ライブラリなどを読み込まずに実現することができるため、今回はJavaScriptの「sessionStorage」を使っていきます。
sessionStorageってなに？
sessionStorageとは、ブラウザに元々ある保存領域のこと。
JavaScriptでデータを保存・取得・削除・初期化することができます。
sessionStorageの特徴
- Webページのセッションが続いている間はデータは保存される
- ページのセッションが終了するときに消去される
- ページを閉じてもそのブラウザウィンドウもしくはタブを閉じない限り情報を保持し続ける
ちなみに「セッション」とは、Webサイトにアクセスされてからアクセス終了までの一連の通信のこと。
別のページに移動してもそれは1つのセッションとみなされます。
ウィンドウを閉じたり、同じページを長時間開いたままにしているとセッションが切れます。
参考：Window.sessionStorage – Web API | MDN
実装する
デモ
codepenおいておきます。デモはこんな感じ。
2秒でローディング画面がフェードアウトしていき、その後はセッションが続いている場合は表示されません。
再度確認したい場合は、Chromeのゲストモードなどで開くと確認できると思います！
ポイント解説していきます〜
HTML：ローディング用
今回はローディング画面をアクセス時のみ表示させるので、ローディングのHTMLを記述します。
CSSは.loadingにbackground-imageで背景画像設置するイメージ！
Loading code...JavaScript：今回のきも！初回のみ実行させるコード
if文を使って、初めてのアクセスの時のみ実行させる処理を書きます。
sessionStorage.setItem(sessionKey, sessionValue);でデータを保存してアクセスの跡を残すのがポイント。
sessionStorageの使い方メモ
- 保存：
sessionStorage.setItem(sessionKey, sessionValue); - 取得：sessionStorage.getItem(‘
sessionKey‘); - 消去：
sessionStorage.removeItem(‘sessionKey‘); - 初期化：
sessionStorage.clear()
else以降は、確認用に書いているだけなので実際はなくても◎
Loading code...sessionStorageうまく使えましたか？
いろいろゴニョゴニョしないとだめかなと思ったら、「sessionStorage」があるおかげでだいぶシンプルに実装することができました。
このためにライブラリ読み込むのもなって感じなので、使えるときはsessionStorageおすすめです。
- sessionStorageの使い方参考：
https://b-risk.jp/blog/2021/07/sessionstorage/
