サンプル付きで確認！jquery.cookie.jsの使い方

それほどcookieを使用する機会は多くないかもしれませんが、ページを遷移したり、リロードしても値を保持することができるのでユーザビリティに役立ちます。

「jquery.cookie.js」を使えば簡単にcookieの値を取得・保存・削除することができて便利ですので、使い方をサンプルと合わせて確認していきたいと思います。

Contents

jquery.cookie.jsの使い方
jquery.cookie.jsの設置
cookieを使用したサンプル
- 1.カウントアップ、リセット
- 2.閉じた状態を保持するキャンペーンボックス
まとめ

jquery.cookie.jsの使い方

まずはcookieの使い方を確認していきましょう。

cookieの取得

var sample = $.cookie('名前');

変数「sample」にcookieの値を取得して、代入できます。

cookieの保存

$.cookie('名前','値');

これが基本設定になります。

オプション

cookieにはオプションを設定することができます。任意の値になるので省略可能です。下記詳細になります。

$.cookie('data','1',{expires:7, path:'/', domain:'webdesignday.jp', secure:true});

expires	cookieの保存期限。7の場合は7日間。省略時はブラウザ終了まで有効。
path	cookieを使用するパス。サイト全体で使う場合は’/’を設定。
domain	cookieの有効ドメイン。
secure	textteセキュア通信時のみ送信。xttext

cookieの削除

$.removeCookie( "名前" );

これだけです。簡単ですね。

jquery.cookie.jsの設置

では設置していきましょう。

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

jQueryの後に読み込みます。今回CDNで設置していますが、こちらから「jquery.cookie.js」をダウンロードできます。

cookieを使用したサンプル

1.カウントアップ、リセット

簡単に値をカウントアップ、リセットするサンプルを作成しました。「カウントアップ」クリックで値をカウントアップし、リロードしても値が保持されます。「リセット」クリックでcookieを削除します。

HTML

<p>「カウントアップ」クリックでカウントアップし、ブラウザを終了しない限り値を維持します。<br>
「リセット」クリックでcookieを削除します。</p>
<p>カウント:<span class="js-count-num"></span></p>
<button class="js-count-btn">カウントアップ</button><button class="js-reset-btn">リセット</button>

jQuery

var cookie = $.cookie('cookie');    
if(cookie){
    $('.js-count-num').text(cookie);
}
else{
    $('.js-count-num').text(0);
}
var count = $('.js-count-num').text();
$('.js-count-btn').on('click',function(){
    count++;
    $.cookie( "cookie",count);
    $('.js-count-num').text(count);
});
$('.js-reset-btn').on('click',function(){
    count = 0;
    $.removeCookie( "cookie");
    $('.js-count-num').text(count);
});

1行目　cookieの値を参照して変数「cookie」に代入しています。
2行目　条件判定で、cookieの値があれば「js-count-num」にcookieの値をセットし、なければ「0」をセットしています。

11行目　「js-count-btn」クリック時にcookieに値をセットしています。オプションを設定していませんので、ブラウザ終了までがcookieの保存期間になります。
16行目　「js-reset-btn」クリック時にcookieの値をリセットしています。

2.閉じた状態を保持するキャンペーンボックス

キャンペーン情報などをサイトにバルーン表示したりする際、ユーザーにとっては閲覧に邪魔なノイズになりかねません。

今回、簡単なサンプルとしてユーザーが一度非表示にしたら、その後ページ遷移したりリロードしても表示されないキャンペーン情報ボックスを設置していきたいと思います。

まずはサンプルをご確認ください。
「x」で非表示にしたら、それ以降はリロードしても表示されません。ブラウザを一度終了してから再度見ると表示されます。

HTML

<aside class="campaign">
    <div class="campaign__contents">
        <h6 class="campaign__contents__title">キャンペーン情報</h6>
        <p class="campaign__contents__text">こちらから会員登録いただいた方のみ！<br>初期費用0円実施中</p>
        <a class="campaign__contents__link" href="">今すぐ無料で会員登録</a>
    </div><!--campaign__contents-->
    <a class="campaign__btn js-campaign__btn">x</a>
</aside>

CSS

.campaign{
    bottom: 40px;
    position: fixed;
    right: 40px;
    z-index: 9999;
}
 
.campaign.close{
    display: none;
}
 
.campaign__contents{
    background: #fff;
    box-shadow: 0px 0px 20px 4px #ddd;
    border-radius: 5px;
    padding: 20px 40px;
    text-align: center; 
}
 
 
.campaign__contents__title{
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
}
 
.campaign__contents__text{
    font-size: 14px;
    margin-bottom: 20px;
}
 
.campaign__contents__link{
    background: #333;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    padding: 5px 20px;
}
 
.campaign__btn{
    background: #333;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: block;
    height: 40px;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 40px;
}

簡単に作ってみましたので、タグやデザインは適宜変更してください。

jQuery

var cookie = $.cookie('campaign');
if(cookie){
    $('.campaign').addClass('close');
}
$('.js-campaign__btn').on('click',function(){
    $('.campaign').addClass('close');
    $.cookie('campaign','close');
});

1行目　cookieの値を参照して変数「cookie」に代入しています。
2行目　条件判定で、cookieの値があれば「 campaign 」にクラス「close」を付与しています。

7行目　「js-campaign__close」クリック時にcookieに値をセットしています。こちらもオプションを設定していませんので、ブラウザ終了までがcookieの保存期間になります。