吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

Plugin : jquery.cookie.js

2014年3月9日 / category : jquery, plug-in-jquery

cookieを使用した案件では、jquery.cookie.jsを使用すると便利です。

jquery.cookie.js

使い方も簡単です。

JavaScript
//cookieを設定する
$.cookie('cookie名', '値');

//cookieを取得する
var value = $.cookie('cookie名');

cookie関数で、’cookie名’と’値’を代入するだけです。

DEMO 0

cookie関数には、いくつかパラメータを設定することができます。

JavaScript
$.cookie( 'cookie名', '値', {
	expires: '有効期限',
	domain: 'ドメイン',
	path: 'パス',
	secure: 'https接続時のみに送信するかどうか'
} );

//ex)
$.cookie( 'cookie名', '値', {
	expires: 7,
	domain: 'tsudoi.org',
	path: '/javascript/jQuery/Plugin/cookie/1/',
	secure: false
} );

expires: 7
7日を指します。もし時・分・秒で設定したい場合は、下記のように記述したください。

JavaScript
//10秒で設定する場合
var _date = new Date();
_date.setTime( _date.getTime() + ( 10 * 1000 ));
$.cookie( cookieName, $('#cookie-set').val(), {
	expires: _date
} );

下記のDEMOでは、cookieの有効期間を10秒で設定しています。

DEMO 1

cookieをクリアすることもできます。

JavaScript
$.removeCookie(cookieName);

removeCookie関数で、クリアしたいcookie名を指定するだけです。

DEMO 2

最後に、cookieの値についてですが、下記のようなオブジェクト型で値をcookieに代入することができません。

JavaScript
var _obj = new Object();
_obj.name = '名前';
_obj.num = 100;
_obj.msg = 'コメント';
$.cookie( cookieName, _obj );

これを可能にするため、json形式での代入を許可することができます。

JavaScript
//json形式を許可する
$.cookie.json = true;

この1行を入れることで、json形式を使用することができます。記述は、オブジェクト型と同じ仕様でできますので、上記の参考構文で問題ありません。取得する場合も、オブジェクト型同様、下記の記述で取得できます。

JavaScript
//json型の値を取得する
var _obj = $.cookie(cookieName);
if(_obj){
	$('#cookie-name').val( _obj.name );
	$('#cookie-num').val( _obj.num );
	$('#cookie-message').val( _obj.msg );
}

DEMO 3

以上が、jquery.cookie.jsの簡単な紹介となります。

DownLoad : DEMO DATA