cookieで条件分岐

閲覧しているブラウザに保存されるcookieを使った条件分岐も可能です。

まずはじめにcookieを使うときの準備をして、関数での条件分岐を使いましょう。

cookieを使う為の準備

条件分岐の前に準備として、jQueryを使ってcookieを付与する時のスニペットを紹介します。

jquery.cookie.js のライブラリを使えば、以下の手順でcookieを付与することができます。

jQuery本体の読み込み

jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。

jquery.cookie.jsの読み込み

次にjquery.cookie.jsをHTMLで記述します。

外部からコンテンツ配信をしてくれるCDNがあるので、以下のコードを<head>〜</head> の中のjQueryより下に記述しましょう。

HTML

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

cookieを付与するjQueryの記述

最後に、指定した文字列のcookieを付与するコードを、<body>〜</body> のクロージングタグ前に記述すれば完了です。

HTML

    //クッキーを付与
    $.cookie("hogehoge","cookiename"); //2つ目は任意の文字を入れます

これでcookieの設定が完了です。以下の条件分岐の記事をご覧ください。

cookieが付与されている時に、表示する時の記述です。

以下のコードは、上記の$.cookie("hogehoge","cookiename"); でcookieが付与されている場合の記述です。

PHP

<?php if( (isset($_COOKIE["hogehoge"]))): ?>
<!-- hogehogeのクッキーがある場合の表示内容 -->
<?php endif; ?>

cookieがある・なしで条件分岐する場合の記述です。

PHP

<?php if( (isset($_COOKIE["hogehoge"]))): ?>
hogehoge のクッキーがある場合の表示内容
<?php else: ?>
それ以外の表示内容
<?php endif; ?>