【セッション】初回アクセスだけモーダルを実行させる

やりたいこと

最初のアクセスのみモーダル処理を実行させて、それ以降はタブを閉じるまでモーダル処理は実行させないようにします。
方法はいくつかありますが、この記事ではJavaScriptでのやり方を書いていきます。

▼ 簡単ですが以下が手順となります。

  1. セッションの取得
  2. セッションが保存されているのかを条件分岐で判定
  3. セッションがnullだったらモーダル処理。その後セッションの保存。
    (※セッションを保存をすることで「null」でなくなります。つまりモーダルの処理はされません。)

文字での説明だけでは理解が難しいので、実際の記述を見てみましょう。

サンプルコード

//セッションの値を取得して変数「session」に保存
var session = sessionStorage.getItem("sessionOpened");
//「session」がnullだったら実行
if (session == null) {
	//モーダル表示の記述はここに書く。以下サンプルモーダルコード。
	$(function() {
		$('.sampleM_btn').on('click', function() {
			$('.sampleM').fadeIn();
			return false;
		});
		$('.sampleM_CloseBtn').on('click', function() {
			$('.sampleM').fadeOut();
			return false;
		});
	}); //モーダル記述ここまで
	//セッションを保存する(タブが閉じるまで保存される)
	sessionStorage.setItem("sessionOpened", "keepWord");
}

今回は条件分岐で「null」の場合にモーダルを表示させましたが、モーダル以外の処理もできるかと思います。
臨機応変に書き換えて使っていただけたらと思います。

RETURN
top