【jQuery】jquery.cookie.jsの使い方

cookieを使用することでページをリロードしたりページを移動しても値を保持することができます。

今回はjquery.cookie.jsを使ってcookieの値を取得や保存を紹介していきたいと思います。

jquery.cookie.jsの設置

jquery.cookie.jsを設置する上でまずは下記のページから jquery.cookie.jsをダウンロードしましょう。

jquery.cookie.jsの読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>

jquery.cookie.jsの使い方

cookieを取得したい

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

cookieを保存したい

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

cookieを削除したい

$.removeCookie( "名前" );

オプションについて

cookieにはオプションを設定することができます。

$.cookie('data','1',{expires:3, path:'/', domain:XXXX', secure:true});

オプション

expires	cookieの保存期限についての設定になります。たとえば3日間の場合は3になります。
path	cookieを使用するパスになります。
domain	cookieの有効ドメインになります。
secure	セキュア通信時のみ送信します。

ボタンを押したらcookieを保存

下記の例では「ボタン」をクリックしたらクッキーを保存します。

「expires: 3」はクッキーの保存期間になります。なので3日間保持します。

「クッキーを削除」をクリックするとクッキーを削除します。

もしクッキーがあれば「クッキーを保持」のテキストを表示してクッキーがなければ「クッキーを保持」のテキストを非表示にします。

html

<button class="btn">ボタン</button>
<p class="text">クッキーを保持</p>
<button class="reset">クッキーを削除</button>

jQuery

var cookie = $.cookie('cookie');
if(cookie){
	jQuery('.text').show();
}else{
	jQuery('.text').hide();
}

jQuery('.btn').on('click',function(){
	var cookie = $.cookie('cookie', '1', { expires: 3 });
	console.log(cookie);
	if(cookie){
		jQuery('.text').show();
	}else{
		jQuery('.text').hide();
	}
});

jQuery('.reset').on('click',function(){
	$.removeCookie( "cookie");
	if(cookie){
		jQuery('.text').show();
	}else{
		jQuery('.text').hide();
	}
});

サンプル