web-dev-qa-db-ja.com

AngularJSでCookieの有効期限を設定する方法

  1. ブラウザの更新（F5）で失われないように、ユーザーの承認情報をCookieに保存します。

  2. ユーザーがログオン時に「Remember Me」チェックボックスを選択した場合に備えて、「permanent-cookie」に認証情報を保存します。

javascriptcookiesangularjssession-cookiesangular-cookies
79
Sutikshan Dubey

これは、ngCookiesモジュールを使用するangularの1.4.0ビルドで可能です。

https://docs.angularjs.org/api/ngCookies/service/$cookies

angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
  // Find tomorrow's date.
  var expireDate = new Date();
  expireDate.setDate(expireDate.getDate() + 1);
  // Setting a cookie
  $cookies.put('myFavorite', 'oatmeal', {'expires': expireDate});
}]);
45
Geert van Dort

1.4の場合：ここおよび以下のコメントに記載されているように、1.4の時点で、AngularのネイティブCookieサポートはCookieを編集する機能を提供しています。

38fbe3eeにより、$ cookiesは現在のブラウザのcookie値を表すプロパティを公開しなくなりました。 $ cookiesは、Cookieの変更についてブラウザをポーリングしなくなり、Cookie値を$ cookiesオブジェクトにコピーしなくなりました。

これは、ポーリングが高価であり、$ cookiesプロパティが実際のブラウザーのCookie値と正しく同期しないという問題を引き起こすために変更されました（ポーリングが最初に追加された理由は、異なるタブ間の通信を許可するためでしたが、今日これを行うより良い方法があります、たとえばlocalStorage。）

$ cookiesの新しいAPIは次のとおりです。

get put getObject putObject getAll remove Cookieデータにアクセスするには、上記のメソッドを明示的に使用する必要があります。これは、ブラウザのCookieで発生する変更を検出するために$ cookiesのプロパティを監視できなくなることも意味します。

通常、この機能が必要になるのは、サードパーティのライブラリが実行時にプログラムでCookieを変更した場合のみです。これに依存する場合は、サードパーティライブラリがCookieを変更することに反応するコードを記述するか、独自のポーリングメカニズムを実装する必要があります。

実際の実装は $ cookiesProvider オブジェクトを介して行われます。このオブジェクトは put 呼び出しを介して渡すことができます。

1.3以下の場合：jQueryプラグインをロードすることを避けるために最善を尽くした人にとって、これはangular- https://github.com/ ivpusic/angular-cookie

32
streetlogics

Angular v1.4では、有効期限など、Cookieのオプションをfinally設定できます。これは非常に簡単な例です：

var now = new Date(),
    // this will set the expiration to 12 months
    exp = new Date(now.getFullYear()+1, now.getMonth(), now.getDate());

$cookies.put('someToken','blabla',{
  expires: exp
});

var cookie = $cookies.get('someToken');
console.log(cookie); // logs 'blabla'

このコードの実行後にCookieを確認すると、someTokenという名前のCookieに有効期限が適切に設定されることがわかります。

上記のput関数に3番目のパラメーターとして渡されるオブジェクトでは、path、domain、およびsecureの設定など、他のオプションも使用できます。概要については、 ドキュメント を確認してください。

PS-$cookieStoreが非推奨になったことを念頭に置いてアップグレードする場合は、$cookiesがCookieを処理する唯一の方法。 docs を参照してください

27
Nobita

Cookieの有効期間の余分な期間を知っている人もいるので、追加の例を紹介します。すなわち。彼らは、さらに10分間、またはさらに1日間続くようにCookieを設定したいと考えています。

通常、Cookieが数秒で持続する時間はすでにわかっています。

    var today = new Date();
    var expiresValue = new Date(today);

    //Set 'expires' option in 1 minute
    expiresValue.setMinutes(today.getMinutes() + 1); 

    //Set 'expires' option in 2 hours
    expiresValue.setMinutes(today.getMinutes() + 120); 


    //Set 'expires' option in (60 x 60) seconds = 1 hour
    expiresValue.setSeconds(today.getSeconds() + 3600); 

    //Set 'expires' option in (12 x 60 x 60) = 43200 seconds = 12 hours
    expiresValue.setSeconds(today.getSeconds() + 43200); 

    $cookies.putObject('myCookiesName', 'myCookiesValue',  {'expires' : expiresValue});

通常どおり取得できます：

    var myCookiesValue = $cookies.getObject('myCookiesName');

空の場合、undefinedを返します。

リンク;

http://www.w3schools.com/jsref/jsref_obj_date.asp
https://docs.angularjs.org/api/ngCookies/provider/ $ cookiesProvider＃defaults

14
Andreas Panagiotidis

Angular.jsスクリプトに移動して、挿入Cookieを変更できます
self.cookies = function(name, value) {を検索すると、たとえば7日間、Cookieを追加するコードを変更できます。

 if (value === undefined) {
    rawDocument.cookie = escape(name) + "=;path=" + cookiePath +
                            ";expires=Thu, 01 Jan 1970 00:00:00 GMT";
  } else {
    if (isString(value)) {
        var now = new Date();
        var time = now.getTime();
        time += 24*60*60*1000*7;
        now.setTime(time);
         cookieLength = (rawDocument.cookie = escape(name) + '=' + escape(value) +
                 ';path=' + cookiePath+";expires="+now.toGMTString()).length + 1
3
yonia

私はこの質問が少し古く、すでに受け入れられた答えを持っていることを知っています。

しかし、私はまだ苦労している現在の問題です（jQueryや純粋なJavascriptに関するものではありません）。

だから、いくつかの調査の後、私はこれを見つけました： https://github.com/ivpusic/angular-cookie

これは、$ cookieStoreと非常によく似た「インターフェース」を提供します。有効期限（値と単位）の構成を許可します。

有効期限が$ cookieまたは$ cookieStoreでのangularネイティブサポートについては、1.4でこのテーマの更新を約束します。 https://github.com /angular/angular.js/pull/10530

$ cookieStore.put（...）で有効期限を設定することが可能になります、少なくとも彼らはそれを提案します...

EDIT：「cookie」と「angular-cookieモジュラー」を混在させることができない「問題」が発生しました。したがって、ipCookie(...)でCookieを設定すると、ipCookie(...)でCookieを取得します。$ cookieではundefinedを返すためです。

2
Paulo Oliveira

@ vincent-briglia 指摘 のように、$cookieサービスが構成可能になるまでの回避策として使用できるjQueryドロップインがあります- こちらをご覧ください

1
Jan Molak

https://github.com/ivpusic/angular-cookie を使用できます

まず、angularモジュールにipCookieを挿入する必要があります。

var myApp = angular.module('myApp', ['ipCookie']);

そして今、例えばあなたがあなたのコントローラーからそれを使いたいなら

myApp.controller('cookieController', ['$scope', 'ipCookie', function($scope, ipCookie) {
  // your code here
}]);

クッキーを作成するには

ipCookie(key, value);

値は文字列、数値、ブール値、配列、オブジェクトをサポートし、自動的にCookieにシリアル化されます。

Cookieの有効期限が切れる日数など、いくつかの追加オプションを設定することもできます

ipCookie(key, value, { expires: 21 });
0
Andy M.