jQuery pluginクッキー
- jQuery: Cookie plugin〔クッキー処理〕
jQuery: Cookie plugin
クッキー処理
2009/2/23
jQuery: Cookie plugin
クッキーの取得・設定・削除を行うjQueryプラグイン。
- クッキーを取得する場合
/* $.cookie("クッキー名"); */ $.cookie('test_cookie'); - クッキーを設定する場合
クッキーの有効期限やパスは、第3引数に配列で指定します。
/* $.cookie("クッキー名", '内容', { path:'パス', expires:有効期限 }) */ /* 有効期限を数値（単位：日）で指定する場合 */ $.cookie('test_cookie', 'naiyou', { path: '/', expires:3}); /* 有効期限を時間で指定する場合 */ var date=new Date(); date.setTime(date.getTime()+(3*24*60*60*1000)); $.cookie('test_cookie', 'naiyou', { path: '/', expires:date});
- クッキーを削除する場合
/* $.cookie("クッキー名", null, {}); または $.cookie("クッキー", '', {expires:-1}); */ $.cookie('test_cookie', null, {}); $.cookie('test_cookie', '', {expires:-1});
設置イメージjQuery Accordion Pluginの設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="/content/lib/jquery/jquery.cookie.js"></script>
<script>
$(function () {
var COOKIE_NAME = 'test_cookie';
var ADDITIONAL_COOKIE_NAME = 'additional';
var options = { path: '/', expires: 10 };
// set cookie by number of days
$('li a').eq(0).click(function() {
$.cookie(COOKIE_NAME, 'test 10days', options);
return false;
});
// set cookie by date
$('li a').eq(1).click(function() {
var date = new Date();
date.setTime(date.getTime() + (3*24*60*60*1000)); /* 3日間 */
$.cookie(COOKIE_NAME, 'test 3days', { path: '/', expires: date });
return false;
});
// get cookie
$('li a').eq(2).click(function() {
$("#res1").text($.cookie(COOKIE_NAME));
return false;
});
// delete cookie
$('li a').eq(3).click(function() {
$.cookie(COOKIE_NAME, null, options);
//$.cookie('COOKIE_NAME', '', { expires: -1 });
$("#res1").text("");
return false;
});
// set a second cookie
$('li a').eq(4).click(function() {
$.cookie(ADDITIONAL_COOKIE_NAME, 'foo=bar;foo2=bar2', { expires: 10 });
return false;
});
// get second cookie
$('li a').eq(5).click(function() {
$("#res2").text($.cookie(ADDITIONAL_COOKIE_NAME));
return false;
});
// delete second cookie
$('li a').eq(6).click(function() {
$.cookie(ADDITIONAL_COOKIE_NAME, null);
//$.cookie('ADDITIONAL_COOKIE_NAME', '', { expires: -1 });
$("#res2").text("");
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
span { color:red; }
</style>
</head>
<body>
<!-- CONTENT -->
<p>参照：<a href='http://plugins.jquery.com/project/Cookie'>jQuery: Cookie plugin</a></p>
<div id="res">
<!-- CODE -->
<p>クッキーの取得・設定・削除</p>
<ul>
<li><a href="#">クッキー設定 (by number of days == 10)</a></li>
<li><a href="#">クッキー設定 (by date == 3 days)</a></li>
<li><a href="#">クッキー取得</a></li>
<li><a href="#">クッキー削除</a></li>
</ul>
<p>取得したクッキーの内容：<span id="res1"></span></p>
<ul>
<li><a href="#">追加クッキー設定</a></li>
<li><a href="#">追加クッキー取得</a></li>
<li><a href="#">追加クッキー削除</a></li>
</ul>
<p>取得した追加クッキーの内容：<span id="res2"></span></p>
<!-- / CODE -->
</div>
<!-- / CONTENT -->
</body>
</html>