📑

ローディングアニメーションの作成におけるsessionStorageとlocaleStorageについて

2024/03/11に公開

JavaScript

CSS 3

HTML 5

tech

本題

ページを開いた際に始まるローディングアニメーションを、最初に訪れた時にだけ表示させて
以降は表示されない方法を調べた所、なにやらwebStorageとやらに情報を保存して実装する事が出来るらしい。

そもそもwebStorageとは

HTML5で登場したクッキーの代わりとなるデータの保存の仕組み。
保存容量はクッキーが最大4KBに対してwebStorageは5MBとのこと。
なにやらブラウザにKey,Valueでデータが保存されるストレージが存在するらしい。
モダンなブラウザではほぼ対応済。
保存されているデータはChromeではDevツール上で確認可能。
「Application > Storage > Session Storage」

データに関しては基本的に下記4つの操作が可能である。

保存
取得
削除
初期化
以下MDN掲載ソース

// sessionStorage にデータを保存
sessionStorage.setItem("key", "value");

// sessionStorage に保存したデータを取得
let data = sessionStorage.getItem("key");

// sessionStorage に保存したデータを削除
sessionStorage.removeItem("key");

// sessionStorage からすべての保存したデータを削除
sessionStorage.clear();

もうこの時点で何か色々出来そうで既におもろい。

sessionStorageとは

sessionStorageに保存されたデータはページのセッションが終了すると同時に消去される。
つまりタブやブラウザを閉じると消去される仕組みとなる。

localeStorageとは

localStorageに保存されたデータは期限が無くセッションが終了しても保存されたままの状態となる。

考えた事

つまりは最初に訪問した際にsessionStorage上になんでもいいからKey,Valueを保存させ、それをif文の条件分岐で判定させ存在の有無で要素の表示、非表示を制御すればいいのではないか。

結果

自身のポートフォリオサイトで実際に使っているソースを貼ってみる。

const LoadElm = document.getElementById('portfolio_load_wrapper');
window.addEventListener('load', function () {
    if (sessionStorage.getItem('checkvisit') === null) {
        LoadElm.classList.add('inactive');
        setTimeout(function () {
            LoadElm.classList.remove('inactive');
        }, 2500)
    }
    sessionStorage.setItem('checkvisit', '1');
})

解説

考えた事をそのまま書いているだけだが流れを書いてみる。

ページをリクエストしてロード後にsetItemメソッドにてKey = checkvisit,Value = 1を保存。因みに値は正直なんでもいいと思う。
getItemメソッドでデータを取得し、先ほど保存されたデータが存在しないかを条件分岐で判定。
存在しなければロード画面の要素に要素表示用のclassを追加させてローディング画面を表示させる。
ロード画面をずっと表示させるわけにもいかないのでsetTimeoutメソッドで2.5秒後に要素を非表示にさせる
データが存在するのであればローディング画面は表示されない

本題

そもそもwebStorageとは

sessionStorageとは

localeStorageとは

考えた事

結果

解説

Discussion