書籍転載:JavaScriptライブラリ実践活用[厳選111]
JavaScriptでクッキーを簡単に操作する[jquery.cookie]
書籍転載の16本目(書籍内の番号は「61」)。JavaScriptでのクッキー操作をごくシンプルなコードで実装できる「jquery.cookieプラグイン」の基本的な使い方を説明する。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
JavaScriptでクッキーを操作するのは意外と厄介です。document.cookieプロパティに対して生のクッキー情報を組み立てて渡さなければいけないためです。しかし、jquery.cookieプラグインを利用することで、JavaScriptでのクッキー操作をごくシンプルなコードで実装できます。
- 名称: jquery.cookie
- 分類: 小ネタ
- URL: https://github.com/carhartl/jquerycookie
- 関連ファイル: jquery-1.9.0.js、jquery.cookie.js
たとえば、リスト061-01は初回アクセスで入力したメールアドレスをクッキーに保存しておいて、2回目以降のアクセスでデフォルト表示する例です。
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script type="text/javascript"
src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
// クッキーemailが存在する場合は、テキストボックスにセット
if($.cookie('email')) {
$('#txtMail').val($.cookie('email')); ―――――――――――2
}
// ボタンクリック時にクッキーemailにテキストボックスの値をセット
$('#btnSave').click(function() {
$.cookie('email', $('#txtMail').val(), { expires: 30 }); ――1
});
});
</script>
|
まず、クッキーを保存しているのは1のコードです。$.cookieメソッドを利用します。
$.cookie(名前, 値, { パラメータ名: 値,... })
|
$.cookieメソッドで利用できるパラメータは、表061-01のとおりです。最低限、有効期限(expires)が設定されていない場合には、クッキーはブラウザを閉じたタイミングで削除されますので注意してください。
パラメータ | 概要 |
---|---|
expires | 有効期限(日)0 |
path | 有効なパス 0 |
domain | 有効なドメイン0 |
保存されたクッキーを取得するには、同じく$.cookieメソッドを以下の構文で呼び出します(2)。
$.cookie(名前)
|
なお、サンプルでは利用していませんが、既存のクッキーを削除するには、次のように$.removeCookieメソッドを利用してください。
$.removeCookie('email');
|
※以下では、本稿の前後を合わせて5回分(第14回~第18回)のみ表示しています。
連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。
14. オブジェクト指向でコードを記述する[CoffeeScript]
書籍転載の14本目(書籍内の番号は「63」)。CoffeeScriptを使用すると、クラスベースのオブジェクト指向で記述できる。その内容を説明する。
15. 処理を短く記述する[CoffeeScript]
書籍転載の15本目(書籍内の番号は「64」)。CoffeeScriptの基本構文のうち、数値や文字列表現、配列、for~in、unless/untilの記述方法を説明する。
16. 【現在、表示中】≫ JavaScriptでクッキーを簡単に操作する[jquery.cookie]
書籍転載の16本目(書籍内の番号は「61」)。JavaScriptでのクッキー操作をごくシンプルなコードで実装できる「jquery.cookieプラグイン」の基本的な使い方を説明する。
17. HTML5+JavaScriptベースでゲームを作る[enchant.js]
書籍転載の17本目(書籍内の番号は「65」)。HTML5+JavaScriptで作られたゲーム・エンジン「enchant.js」の基礎と、基本的な使い方を解説する。
18. JavaScriptベースのデータベース[TaffyDB]
書籍転載の18本目(書籍内の番号は「69」)。JavaScriptのJSON形式のデータに対して、データベースのような感覚でアクセスするためのライブラリ「TaffyDB」の基礎と、基本的な使い方を解説する。