jQuery.Cookie を利用して Cookieに書き込むコードを紹介します。
概要
jQuery.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([キー名], [値]);
とします。
オプションの指定をする場合は、
$.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の値が画面に表示されていることが確認できます。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2015-12-21
