Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

クッキーを読み書きするには?($cookies)

2016年1月18日

AngularJSが提供する機能を利用してクッキーを読み/書き/削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。

  • このエントリーをはてなブックマークに追加

 JavaScriptでクッキーを読み書きするには、JavaScript標準のdocument.cookiesプロパティも利用できます。ただし、cookiesプロパティでは生のクッキー文字列をアプリ開発者が自ら組み立てなければならず、コードはおのずと冗長になりがちです。

 そこでAngularJSでは、クッキーを読み書きするための専用サービスとして、$cookieを提供しています。$cookieサービスを利用することで、クッキーに関わるパラメーターをハッシュ形式で指定できるようになりますので、コードをより直観的かつシンプルに表現できるようになります。

 具体的な例を見てみましょう。以下は、フォームから入力された名前をクッキーに保存し、次回アクセス時にはデフォルト表示する例です。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<form name="myForm" novalidate>
  <label for="name">名前:</label>
  <input id="name" name="name" type="text" ng-model="name" /><br />
  <label>
  <input type="checkbox" ng-model="record" />
  名前を記録する
  </label><br />
  <button ng-click="onclick()">保存</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<!--1ngCookiesモジュールをインポート-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.min.js"></script>
<script>
// 2ngCookiesモジュールへの依存関係を設定
angular.module('myApp', [ 'ngCookies' ])
  .controller('MyController',
  ['$scope', '$cookies', function($scope, $cookies) {
    // 5テキストボックスにクッキー値を反映
    $scope.name = $cookies.get('name');
    $scope.record = true;

    $scope.onclick = function() {
      if($scope.record) {
      // 3[名前を記録する]がチェックされていれば、クッキーを登録
        var expire = new Date();
        expire.setMonth(expire.getMonth() + 3);
        $cookies.put('name', $scope.name, {
          expires: expire
        });
      } else {
        // 4チェックされていなければ、クッキーを破棄
        $cookies.remove('name');
      }
    };
  }]);
</script>
</body>
</html>
入力された名前をクッキーに保存する例(cookies.html)
以前に入力された名前をデフォルト表示
以前に入力された名前をデフォルト表示

 $cookiesサービスを利用するには、AngularJS本体とは別にngCookiesモジュール(angular-cookies.min.js)をインポートした上で(1)、アプリモジュールからngCookiesモジュールへの依存関係を設定しておきます(2)。

 あとは$cookiesサービスのget(取得)/put(設定)/remove(削除)メソッドで、クッキーを操作できるようになります。

[構文]get/put/removeメソッド

get(key)
put(key, value [,opts])
remove(key [,opts])

  • key: クッキー名
  • value: クッキー値
  • opts: クッキーのオプション

 引数optsには「オプション名: 値」のハッシュ形式で、クッキーの動作オプションを設定します。指定できるオプションには、以下のようなものがあります。

オプション名概要デフォルト値
domain クッキーが有効なドメイン 現在のドメイン
path クッキーが有効なパス 要素のhref属性
expires クッキーの有効期限(「Wdy, DD Mon YYYY HH:MM:SS GMT」形式の文字列、またはDateオブジェクト) 0(ブラウザーを閉じるときに破棄)
secure SSL接続でのみクッキーを送信するか false
$cookiesサービスで利用できる主なオプション

 この例では、[名前を記録する]にチェックを入れた場合に、クッキーを登録し(3)、さもなければクッキーを破棄します(4)。また、ページ起動時に、クッキーnameが存在すれば、その値をテキストボックスに反映します(5)。

全てのクッキーを取得する

 登録済みの全てのクッキーを取得するには、$cookiesサービスのgetAllメソッドを利用します。以下は、登録済みのクッキーとその値をログに表示する例です。

JavaScript
angular.forEach($cookies.getAll(), function(value, key) {
  console.log(key + ':' + value);
});
登録済みのクッキーを列挙するためのコード(getAll.html)
登録済みのクッキーをコンソールに列挙

登録済みのクッキーをコンソールに列挙

 getAllメソッドは「名前: 値」のハッシュ形式でクッキー情報を返しますので、例えばangular.forEachメソッドなどで列挙できます。

処理対象:クッキー カテゴリ:サービス
API:$cookies カテゴリ:ngCookies > service(サービス)
API:angular.forEach カテゴリ:ng(コアモジュール) > function(関数)

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

AngularJS TIPS
38. 指定された時間の経過で処理を実行するには?($interval/$timeout)

ミリ秒単位で処理を実行できる、いわゆる「タイマー」である$intervalサービスの基本的な使い方を解説。また、一定時間後に処理を実行する$timeoutサービスについても説明する。

AngularJS TIPS
39. 配列/オブジェクトの内容を列挙するには?(forEach)

angular.forEachメソッドを使って、配列の要素やオブジェクトのメンバーを列挙する方法を解説する。

AngularJS TIPS
40. 【現在、表示中】≫ クッキーを読み書きするには?($cookies)

AngularJSが提供する機能を利用してクッキーを読み/書き/削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。

AngularJS TIPS
41. $cookiesサービスを利用する際の注意点とは?($cookies)

AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。

AngularJS TIPS
42. アプリ共通の例外処理を実装するには?($exceptionHandler)

アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。

サイトからのお知らせ

Twitterでつぶやこう!