【JavaScript】ローディング画面を初回セッションのみ実行する方法｜sessionStrageとは何か?

javascript-prograshi（プロぐらし）-kv JavaScript
記事内に広告が含まれていることがあります。

JavaScriptを使うとWEBページを読みこんだときにローディング画面を表示することができます。

ローディング画面をアニメーションやムービー再生のように使う場合、毎回ロードするたびにアニメーションが読み込まれると少しうっとおしいかもしれません。

そんなときは、初回セッション時のみローディングのアニメーションを表示することができます。

ここでは、その方法を解説しています。


ロード時に毎回表示する場合

最初に、ロード時に毎回表示するローディング画面を用意します。

ここでは、ロードと同時に動画を再生し、3.4秒後に非表示にするローディング画面を使います。

See the Pen 動画ローディング画面（ロードボタンあり） by pro gurashi (@pro-gurashi) on CodePen.


JavaScriptのコードは以下のようになっています。

document.addEventListener('DOMContentLoaded', () => {
  
  // ローディング画面を非表示にする関数
  function end_loader() {
    const loader = document.getElementById('my-custom-loader-wrapper');
    loader.style.transition = 'opacity 0.4s';
    loader.style.opacity = '0';
    setTimeout(() => {
      loader.style.display = 'none';
    }, 400);
  }

  // ローディング画面を終了処理の実行
  window.addEventListener('load', () => {
    setTimeout(() => {
      end_loader();
    }, 3000);
  });
  
});


ここに、初回セッションのみローディング画面を表示する処理を追記していきます。


ご参考

上記のローディング画面のコードの詳細については下記をご参考ください。

【JavaScript】ローディング画面を動画で簡単に実装する方法


初回セッションのみ実行する方法

初回セッションのみ実行するには、「sessionStorage」を使うととても簡単です。

(※codepenでjavascriptを使ってページをリロードしたりセッションクリアしているためワーニングが表示されます。無視してください。右下の「0.5x」をクリックする見やすくなります。)

See the Pen 動画ローディング画面（初回セッションのみ） by pro gurashi (@pro-gurashi) on CodePen.


JavaScriptのコードは以下のようになっています。

////////////初回セッションのみ/////////
document.addEventListener('DOMContentLoaded', () => {
  // ローディング画面を非表示にする関数
  const end_loader = () => {
    const loader = document.getElementById('my-custom-loader-wrapper');
    loader.style.transition = 'opacity 0.4s';
    loader.style.opacity = '0';
    setTimeout(() => {
      loader.style.display = 'none';
    }, 400);
  }

  // 初回セッションかどうかを確認する関数
  const isFirstSession = () => {
    return !sessionStorage.getItem('hasVisited');
  }

  // 初回セッションの場合にローディング画面の終了処理を実行
  if (isFirstSession()) {
    window.addEventListener('load', () => {
      setTimeout(() => {
        end_loader();
        // 初回セッションが終了したことを記録
        sessionStorage.setItem('hasVisited', 'true');
      }, 3000);
    });
  } else {
    // 初回セッションではない場合、ローディング画面を非表示にする
    end_loader();
  }
});


セッション処理のために追記した部分は以下のみです。

  // 初回セッションかどうかを確認する関数
  const isFirstSession = () => {
    return !sessionStorage.getItem('hasVisited');
  }

  // 初回セッションの場合にローディング画面の終了処理を実行
  if (isFirstSession()) {

        // 初回セッションが終了したことを記録
        sessionStorage.setItem('hasVisited', 'true');
      }, 3000);
    });
  } else {
    // 初回セッションではない場合、ローディング画面を非表示にする
    end_loader();
  }
});



セッション情報を返す関数を定義

セッションがあるかないかを判定するために「isFirstSession」という関数を作成しています。

  const isFirstSession = () => {
    return !sessionStorage.getItem('hasVisited');
  }


「sessionStorage」から「hasVisited」というキーの値を取得して、存在すればtrueを、存在しなければfalseを返します。


なお、アロー関数なので、以下と同じです。

  function isFirstSession () {
    return !sessionStorage.getItem('hasVisited');
  }


sessionStrageとは何か？

「sessionStrage」とはウェブブラウザにデータをキーとバリューのペアで保存するためのAPIです。

保存されたデータは、ブラウザセッションが終了するまで保持されます。ブラウザタブやウィンドウを閉じるとデータは削除されます。

sessionStrageではデータの取得、保存、クリアのために次のメソッドを使います。


getItem

sessionStrage.getItem("キー名"); を使うと、sessionStrageに保存してあるキー名の値を取得します。


setItem

sessionStrage.setItem("キー", "値"); を使うと、sessionStrageに指定したキー名で値を保存することができます。



removeItem

sessionStrage.removeItem("キー名"); を使うと、sessionStrageに保存してある指定したキー名と値のセットを削除します。


clear

sessionStrage.clear(); を使うと、sessionStrageに保存してあるすべてのデータを削除することができます。


初回セッション時にデータを記録する

次に、初回に画面をロードしたとき（isFirstSessionの戻り値がtrueの場合）は「sessionStrage」のキー名「hasVisited」の値に「true」をセットします。

sessionStorage.setItem('hasVisited', 'true');

  // 初回セッションの場合にローディング画面の終了処理を実行
  if (isFirstSession()) {
    window.addEventListener('load', () => {
      setTimeout(() => {
        end_loader();
        // 初回セッションが終了したことを記録
        sessionStorage.setItem('hasVisited', 'true');
      }, 3000);
    });
  } else {
    // 初回セッションではない場合、ローディング画面を非表示にする
    end_loader();
  }


こうすることで、同一セッション内で2回目に画面をロードすると、「isFirstSession」の戻り値がfalseになり、ローダーの終了処理のみが実行されます。

「end_loader」の処理は0.4秒かけてdisplay:noneにするので、別処理として、即時にdispalay:none;にしても問題ありません。




タイトルとURLをコピーしました