Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
書籍転載:JavaScriptライブラリ実践活用[厳選111]

書籍転載:JavaScriptライブラリ実践活用[厳選111]

JavaScriptでクッキーを簡単に操作する[jquery.cookie]

2013年6月27日

書籍転載の16本目(書籍内の番号は「61」)。JavaScriptでのクッキー操作をごくシンプルなコードで実装できる「jquery.cookieプラグイン」の基本的な使い方を説明する。

WINGSプロジェクト 山田 祥寛
  • このエントリーをはてなブックマークに追加

書籍転載について

 本コーナーは、技術評論社発行の書籍『JavaScriptライブラリ実践活用[厳選111]』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

 『JavaScriptライブラリ実践活用[厳選111]』の詳細や購入は技術評論社のサイト目次ページをご覧ください。

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。

JavaScriptでクッキーを操作するのは意外と厄介です。document.cookieプロパティに対して生のクッキー情報を組み立てて渡さなければいけないためです。しかし、jquery.cookieプラグインを利用することで、JavaScriptでのクッキー操作をごくシンプルなコードで実装できます。

初回アクセスで入力したメールアドレスをデフォルト表示
初回アクセスで入力したメールアドレスをデフォルト表示

 たとえば、リスト061-01は初回アクセスで入力したメールアドレスをクッキーに保存しておいて、2回目以降のアクセスでデフォルト表示する例です。

JavaScript
<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>
リスト061-01 cookie.html(一部)

 まず、クッキーを保存しているのは1のコードです。$.cookieメソッドを利用します。

$.cookie(名前, , { パラメータ名: ,... })

 $.cookieメソッドで利用できるパラメータは、表061-01のとおりです。最低限、有効期限(expires)が設定されていない場合には、クッキーはブラウザを閉じたタイミングで削除されますので注意してください。

パラメータ概要
expires 有効期限(日)0
path 有効なパス 0
domain 有効なドメイン0
表061-01 $.cookieメソッドで利用できる主なパラメータ

 保存されたクッキーを取得するには、同じく$.cookieメソッドを以下の構文で呼び出します(2)。

$.cookie(名前)

 なお、サンプルでは利用していませんが、既存のクッキーを削除するには、次のように$.removeCookieメソッドを利用してください。

$.removeCookie('email');

※以下では、本稿の前後を合わせて5回分(第14回~第18回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
14. オブジェクト指向でコードを記述する[CoffeeScript]

書籍転載の14本目(書籍内の番号は「63」)。CoffeeScriptを使用すると、クラスベースのオブジェクト指向で記述できる。その内容を説明する。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
15. 処理を短く記述する[CoffeeScript]

書籍転載の15本目(書籍内の番号は「64」)。CoffeeScriptの基本構文のうち、数値や文字列表現、配列、for~in、unless/untilの記述方法を説明する。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
16. 【現在、表示中】≫ JavaScriptでクッキーを簡単に操作する[jquery.cookie]

書籍転載の16本目(書籍内の番号は「61」)。JavaScriptでのクッキー操作をごくシンプルなコードで実装できる「jquery.cookieプラグイン」の基本的な使い方を説明する。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
17. HTML5+JavaScriptベースでゲームを作る[enchant.js]

書籍転載の17本目(書籍内の番号は「65」)。HTML5+JavaScriptで作られたゲーム・エンジン「enchant.js」の基礎と、基本的な使い方を解説する。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
18. JavaScriptベースのデータベース[TaffyDB]

書籍転載の18本目(書籍内の番号は「69」)。JavaScriptのJSON形式のデータに対して、データベースのような感覚でアクセスするためのライブラリ「TaffyDB」の基礎と、基本的な使い方を解説する。

サイトからのお知らせ

Twitterでつぶやこう!