jQueryを利用しないでJavaScriptでCookieを操作するコードは以下の記事を参照してください。
jQuery.Cookie を利用して Cookieへの書き込み、読み込み、削除のコードと実行結果を紹介します。
jQuery.Cookie を利用すると、シンプルなコードでCookieへ情報の書き込みや、読み込みができます。
また、パーシングの必要なくCookieに書き込まれたキーに対する値を読み出すことができます。
jQuery と jQuery.Cookie をダウンロードします。
Head部にjQuery と jQuery.Cookie のScriptタグを記述します。
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
以下のコードで書き込みができます。
$.cookie([キー名], [値]);
書き込みオプションの指定をする場合は以下の記述になります。
$.cookie([キー名], [値], {[オプションの記述]});
パスを指定する場合
$.cookie('Test', '100', {path: '/' });
$.cookie('Test', '100', { expires: 7});
$.cookie('Test', '100', {domain: 'ipentec.com' });
$.cookie('Test', '100', {secure: true});
パス、有効期限を指定する場合
複数のオプションを指定する場合は"," で区切り記述します。
$.cookie('Test', '100', { expires: 3, path: '/data' });
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<meta charset="utf-8" />
<script type="text/javascript">
$(document).ready(function () {
$.cookie("Name", "ペンギン", { expires: 14 });
$.cookie("Age", "3", { expires: 14 });
$("#msg").text("Cookieに書き込みました。");
})
</script>
</head>
<body>
<div id="msg"></div>
</body>
</html>
上記のHTMLファイルにWebブラウザでアクセスします。下図の画面が表示されます。
以下で紹介しているCookieの値を読み出すページにアクセスします。先のページで書き込んだCookieの値が画面に表示されていることが確認できます。
Head部にjQuery と jQuery.Cookie のScriptタグを記述します。
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
以下のコードで読み込みができます。
$.cookie([キー名]);
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
$(document).ready(function () {
var valueName = $.cookie("Name");
var valueAge = $.cookie("Age");
$("#msg").html("Cookieの内容(Name): " + valueName + "<br/>" + "Cookieの内容(Age): " + valueAge);
});
</script>
</head>
<body>
<div id="msg"></div>
</body>
</html>
上記のHTMLファイルにWebブラウザでアクセスします。
Cookieに値が書き込まれていない状態では、"undefined"が表示されます。
先に紹介した、Cookieへの書き込みページにアクセスし、
Cookieに値を書き込んだ状態で、上記のHTMLファイルにアクセスすると、Cookieに書き込まれた値が表示できます。
removeCookie() メソッドを利用します。$.removeCookie([削除するCookieのキー名]);
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
$(document).ready(function () {
$.removeCookie("Name");
$.removeCookie("Age");
$("#msg").text("Cookieをクリアしました。");
});
</script>
</head>
<body>
<div id="msg"></div>
</body>
</html>
Cookieに値が書き込まれている状態にします。書き込まれている値を確認します。Cookieに書き込まれている値を参照するコードはこちらの記事を参照してください。
上記のHTMLファイルにWebブラウザでアクセスします。下図の画面が表示されます。
先ほどのCookieの値を確認するページをWebブラウザで開きます。値がクリアされ、"undefined" になっていることが確認できます。
別の方法として、Cookieの値書き込み時にnullを与えて、nullで上書きする方法があります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
$(document).ready(function () {
$.cookie("Name", null);
$.cookie("Age", null);
$("#msg").text("Cookieをクリアしました。");
});
</script>
</head>
<body>
<div id="msg"></div>
</body>
</html>
また、Expires に -1を与えてCookieを有効期限切れにして、クリアする方法もあります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
$(document).ready(function () {
$.cookie("Name","", {expires: -1});
$.cookie("Age", "", {expires: -1});
$("#msg").text("Cookieをクリアしました。");
});
</script>
</head>
<body>
<div id="msg"></div>
</body>
</html>
