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

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

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

Contents

1 1.jquery.cookie.jsの使い方
2 2.jquery.cookie.jsの設置
3 3.cookieを使用したサンプル
4 まとめ

1.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	セキュア通信時のみ送信。

cookieの削除

$.removeCookie( "名前" );

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

2.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」をダウンロードできます。

3.cookieを使用したサンプル

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

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

jquery.cookie.jsを使ってカウントアップ

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の保存期間になります。