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;」になるという感じですね。

現場から以上です！