AngularJS TIPS
クッキーを読み書きするには？（$cookies）
AngularJSが提供する機能を利用してクッキーを読み／書き／削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。
JavaScriptでクッキーを読み書きするには、JavaScript標準のdocument.cookiesプロパティも利用できます。ただし、cookiesプロパティでは生のクッキー文字列をアプリ開発者が自ら組み立てなければならず、コードはおのずと冗長になりがちです。
そこでAngularJSでは、クッキーを読み書きするための専用サービスとして、$cookieを提供しています。$cookieサービスを利用することで、クッキーに関わるパラメーターをハッシュ形式で指定できるようになりますので、コードをより直観的かつシンプルに表現できるようになります。
具体的な例を見てみましょう。以下は、フォームから入力された名前をクッキーに保存し、次回アクセス時にはデフォルト表示する例です。
|
<!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サービスを利用するには、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 |
この例では、［名前を記録する］にチェックを入れた場合に、クッキーを登録し（3）、さもなければクッキーを破棄します（4）。また、ページ起動時に、クッキーnameが存在すれば、その値をテキストボックスに反映します（5）。
全てのクッキーを取得する
登録済みの全てのクッキーを取得するには、$cookiesサービスのgetAllメソッドを利用します。以下は、登録済みのクッキーとその値をログに表示する例です。
|
angular.forEach($cookies.getAll(), function(value, key) {
console.log(key + ':' + value);
});
|
getAllメソッドは「名前: 値」のハッシュ形式でクッキー情報を返しますので、例えばangular.forEachメソッドなどで列挙できます。
API：$cookies カテゴリ：ngCookies > service（サービス）
API：angular.forEach カテゴリ：ng（コアモジュール） > function（関数）
※以下では、本稿の前後を合わせて5回分（第38回～第42回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
38. 指定された時間の経過で処理を実行するには？（$interval／$timeout）
ミリ秒単位で処理を実行できる、いわゆる「タイマー」である$intervalサービスの基本的な使い方を解説。また、一定時間後に処理を実行する$timeoutサービスについても説明する。
40. 【現在、表示中】≫ クッキーを読み書きするには？（$cookies）
AngularJSが提供する機能を利用してクッキーを読み／書き／削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。
41. $cookiesサービスを利用する際の注意点とは？（$cookies）
AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。
42. アプリ共通の例外処理を実装するには？（$exceptionHandler）
アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。
