• HOME
  • CODE
  • Cookieを使って24時間以内の訪問かどうかjQueryで判別し、style(css)を制御する方法

2020/08/04 21:36

Cookieを使って24時間以内の訪問かどうかjQueryで判別し、style(css)を制御する方法

例えば「24時間以内に再訪問されたらトップアニメーションは非表示にしたい」等という時に役立つ、jQueryを使ったcookie制御の方法を紹介します。

 

Cookie(クッキー)を使って、アクセスが何秒以内なのかをまずは判別し、分岐。

その中で表示か非表示かを指定する形です。

 

 

まずは「head」内にcookieを使う為のCDNを読み込んでおきましょう。

 

 

【html(head内)】

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

 

 

続いて初回なのか2回目以降なのかを判別するjQueryの記述を「html」ファイル内に書きます。

 

【jQuery】

<!-- 24時間以内の訪問の場合は非表示 -->

<script>

  $(function(){

    if($.cookie("access") == undefined) {

    var date = new Date();

    date.setTime( date.getTime() + ( 86400 )); // 60秒*60分*24時間=86400秒

    $.cookie( "access", "seconds", { expires: date });

      $(".sample-style").css("display","block") // 初回アクセス

    } else {

      $(".sample-style").css("display","none") // 2回目以降のアクセス

    }

  });

</script>

 

例では「86400」秒として、24時間の設定にしてますが、ここの秒数を例えば「60」とすれば60秒(1分)以内の再アクセスかどうかという分岐になります。

 

つまり上の例は初回アクセス時には「sample-style」というclassが「display: block;」になり、24時間以内の再アクセスの場合は「display: none;」になります。

そして次の日になればまた初回の場合のみ「display: block;」になるという感じですね。

 

 

現場から以上です!

3246