INSPIRATION

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

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

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

 

目次

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

 

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を削除します。

 

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

 

まとめ

いかがだったでしょう?「jquery.cookie.js」を使うと簡単にcookieを扱うことができます。今回は簡単なサンプルなので複雑なことはしませんでしたが、cookieの値を利用して様々なことができます。

例えばたまに見る文字サイズの「大」、「中」、「小」ボタンをクリックして表示サイズを変えるサイトとか。これもページ遷移するたびにイチイチボタン押さなきゃならなかったら面倒ですよね。こんな場合は「jquery.cookie.js」が活躍します。

ぜひ機会があれば「jquery.cookie.js」を使ってみてください。

今回のサンプルのアニメーションやグローバルナビの開閉は下記の記事で詳細記載していますので、興味がある方はぜひチェックしてみてくださいね。

 

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!

 

【CSS】徹底検証!CSSで縦書きデザインをやってみる!
NEXT INSPIRATION
【Web デザイン】参考にしたい!サイトのファーストビューデザイン集
PREVIOUS INSPIRATION