問題 × 解決策

jQueryでクッキー(cookie)を使う方法

問題

jQueryでcookieを使う方法には?

解決策

jQueryライブラリ「jquery.cookie.js」を使用する。

 

クッキー(cookie)

cookieを使用することで、ユーザー側に様々な値を持たせることができ、様々な応用を効かせることができます。
今回はjQueryでcookieを使う方法をご紹介します。

DEMOはこちら

下のボタンをクリックする度に「havecookie」という名前で「active」という値を持ったクッキー(cookie)の作成/削除が繰り返されます。

クッキー(cookie)の作成/削除の切り替え

現在のクッキー(cookie)の保持状況

現在、クッキー(cookie)は保持していません。

「jquery.cookie.js」を取得します。

まず、下記サイトにアクセスします。

【GitHub – carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:】
https://github.com/carhartl/jquery-cookie

「Clone or download」→「Download ZIP」ボタンをクリックします。

ダウンロードしたzipファイル「jquery-cookie-master.zip」を解凍します。
解凍した「jquery-cookie-master」フォルダの中から使用するファイルは以下の1点です。

  • 「src」にある「jquery.cookie.js」をjavascriptフォルダへコピーします。

「jquery.cookie.js」の読み込みと処理の構築

「jquery.cookie.js」の読み込みと処理を構築します。

「jquery.cookie.js」の読み込み

「jquery.cookie.js」を読み込みます。

<script type="text/javascript" src="ファイルパス/js/jquery.cookie.js"></script>

「jquery.cookie.js」による基本的なクッキー(cookie)の作成方法

「jquery.cookie.js」によるクッキー(cookie)作成の基本的な記述方法は以下となります。

$.cookie( "クッキー(cookie)の名前", "値" );

$.cookie( “クッキー(cookie)の名前”, “値” )」でクッキー(cookie)を作成することができます。

  • 値を入力せず「$.cookie( “クッキー(cookie)の名前” )」でも作成は可能です。

クッキー(cookie)の削除方法

クッキー(cookie)作成の基本的な削除方法は以下となります。

$.removeCookie( "クッキー(cookie)の名前" );

$.removeCookie( “クッキー(cookie)の名前” )」でクッキー(cookie)を削除することができます。

クッキー(cookie)を保持しているかどうかの判定

クッキー(cookie)を保持しているかどうかの判定する記述方法は以下となります。

if( $.cookie( "クッキー(cookie)の名前" ) ){ ... };

if( $.cookie( “クッキー(cookie)の名前” ) )」でクッキー(cookie)を保持しているかどうかを判定することができます。

DEMOで行った処理の記述例

DEMOで行った処理の記述例は以下となります。

if( $.cookie( "havecookie" ) ){
	$.removeCookie( "havecookie" );
}
if($('.cookiemethod-box').length){
	$('.cookiemethod-box .btns a').click(function(event){
		event.preventDefault();
		if( $.cookie( "havecookie" ) ){
			$.removeCookie( "havecookie" );
			$('.cookiemethod-box .status').html( "現在、クッキー(cookie)は保持していません。" );
		}else{
			var cookie = $.cookie( "havecookie", "active" );
			$('.cookiemethod-box .status').html( "現在、クッキー(cookie)を保持しています。<br>名前:havecookie "+"値:"+cookie );
		}
	})
}

参照

以下のサイトが、より詳しく解説してくれています。

【【jQuery】サンプル付きで確認!jquery.cookie.jsの使い方 – WEBDESIGNDAY】
https://webdesignday.jp/inspiration/technique/jquery-js/3704/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

1 × one =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧