AngularJSでCookieにアクセスするにはどうすればよいですか？

236

AngularJSでCookieにアクセスする方法は何ですか？Cookieのサービスとモジュールの両方への参照を見ましたが、例はありません。

AngularJSの正規のアプローチはありますか、またはありませんか？

angularjs  angular-cookies 
— エリスホワイトヘッド
ソース
1
angularjsの優れた点は、依存関係の注入という側面があるため、ユニットテスト用にngCookiesなどをモックアウトできることです。あなたのステップを入れてくれてありがとう。
— Dan Doyon、2013年
5
@DanDoyon同じことを実装しようとしていますが、設定内のapp.jsにあります。しかし、「Uncaught Error：Unknown provider：$ cookies」という手がかりが表示されます。
— Anand 2012
@ sutikshan-dubeyはあなたの質問を見て、コードサンプルを提供できますか？
— Dan Doyon、2012年
@DanDoyonありがとう。cookieが私の目的を解決しませんでした、stackoverflow.com / questions / 12624181 /… ウェブストレージを使用して修正しました。これは私を大いに
— Anand
1
答えを投稿してください答えの代わりに質問にそれを埋め込みます。
— Eliran Malka 2013

回答:

200

この回答は、最新の安定したangularjsバージョンを反映するように更新されました。重要な注意点の1つ$cookieStoreは、薄いラッパーで囲まれていること$cookiesです。セッションCookieでのみ機能するという点で、ほとんど同じです。これは元の質問の答えになりますが、localstorageやjquery.cookieプラグイン（よりきめ細かい制御が可能になり、サーバーサイドのCookieが提供される）を使用するなど、検討したい他のソリューションがあります。もちろん、angularjsでこれを行うと、おそらくそれらをサービスにラップし、$scope.applyモデルへの変更の角度を通知するために使用したいと思うでしょう（場合によっては）。

もう1つの注意点は、$cookie値を格納するのに使用していたのか、を格納していたのかに応じて、データを引き出すときに2つの間にわずかな違いがあることです$cookieStore。もちろん、あなたは本当にどちらか一方を使いたいでしょう。

jsファイルへの参照を追加することに加えて、次のngCookiesようなアプリ定義に挿入する必要があります。

angular.module('myApp', ['ngCookies']);

その後、あなたは行ってもいいはずです。

これは機能的な最小限の例です。ここでは、これcookieStoreがCookieの薄いラッパーであることを示します。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="MyController">

  <h3>Cookies</h3>
  <pre>{{usingCookies|json}}</pre>
  <h3>Cookie Store</h3>
  <pre>{{usingCookieStore|json}}</pre>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
  <script>
    angular.module('myApp', ['ngCookies']);
    app.controller('MyController',['$scope','$cookies','$cookieStore', 
                       function($scope,$cookies,$cookieStore) {
      var someSessionObj = { 'innerObj' : 'somesessioncookievalue'};

    $cookies.dotobject = someSessionObj;
    $scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') };

    $cookieStore.put('obj', someSessionObj);
    $scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, };
    }
  </script>

</body>
</html>

手順は次のとおりです。

  1. 含む angular.js
  2. 含む angular-cookies.js
  3. ngCookiesアプリモジュールに挿入します（そして、ng-app属性でそのモジュールを参照していることを確認してください）
  4. $cookiesまたは$cookieStoreパラメータをコントローラに追加する
  5. ドット（。）演算子を使用して、メンバー変数としてCookieにアクセスします-または-
  6. cookieStoreput / getメソッドを使用したアクセス
— ダンドヨン
ソース
4
この回答は機能しなくなりました。別の回答で説明されているように、代わりに$ cookieStoreを使用する必要があります。
— ビル
@Bill、ありがとう 更新します。
— Dan Doyon 2013年
私は答えを更新し、@ Bill $ cookieStoreの方が使いやすいかもしれませんが、$ cookiesの動作は少し異なります
— Dan Doyon
1
localhostとcookieを使用するときに問題があると思います）。localhostの代わりにマシン名を使用すると、より良い結果が得られる可能性があります。
— Dan Doyon 2014年
18
— Niklas Ekman
71

これは、Cookie値を設定および取得する方法です。これは、この質問を見つけたときに最初に探していたものです。

の$cookieStore代わりに使用することに注意してください$cookies

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', ['ngCookies']);
    function CookieCtrl($scope, $cookieStore) {
      $scope.lastVal = $cookieStore.get('tab');

      $scope.changeTab = function(tabName){
          $scope.lastVal = tabName;
          $cookieStore.put('tab', tabName);
      };
    }
  </script>
</head>
<body ng-controller="CookieCtrl">
    <!-- ... -->
</body>
</html>
— ウリ
ソース
45

Angular はバージョン1.4.xで廃止さ $cookieStoreれたため、$cookies最新バージョンのangularを使用している場合は代わりに使用してください。$cookieStore＆の構文は同じです$cookies： 

$cookies.put("key", "value"); 
var value = $cookies.get("key");

APIの概要については、ドキュメントをご覧ください。また、Cookieサービスは、有効期限の設定（この回答を参照）やドメイン（CookiesProvider Docsを参照）の設定などのいくつかの新しい重要な機能によって強化されていることにも注意してください。

バージョン1.3.x以前では、$ cookiesの構文は上記とは異なります。 

$cookies.key = "value";
var value = $cookies.value;

また、bowerを使用している場合は、パッケージ名を正しく入力してください。 

bower install angular-cookies@X.Y.Z

ここで、XYZは実行しているAngularJSのバージョンです。bowerの別のパッケージ "angular-cookie"（ 's'なし）があり、公式のAngularパッケージではありません。

— Maksood
ソース
14

参考までに、私は$cookieStore、2つのコントローラー$rootScope、、およびAngularjS 1.0.6 を使用して、このJSFiddleをまとめました。JSFifddleのhttp://jsfiddle.net/krimple/9dSb2/をベースにしていて、これをいじってるのなら...

その要点は次のとおりです。

Javascript

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

myApp.controller('CookieCtrl', function ($scope, $rootScope, $cookieStore) {
    $scope.bump = function () {
        var lastVal = $cookieStore.get('lastValue');
        if (!lastVal) {
            $rootScope.lastVal = 1;
        } else {
            $rootScope.lastVal = lastVal + 1;
        }
        $cookieStore.put('lastValue', $rootScope.lastVal);
    }
});

myApp.controller('ShowerCtrl', function () {
});

HTML

<div ng-app="myApp">
    <div id="lastVal" ng-controller="ShowerCtrl">{{ lastVal }}</div>
    <div id="button-holder" ng-controller="CookieCtrl">
        <button ng-click="bump()">Bump!</button>
    </div>
</div>
— ケン・リプル
ソース
11

http://docs.angularjs.org/api/ngCookies.$cookieStore

使用するには、必ずhttp://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.jsを含めてください。

— アンドリュージョスリン
ソース
2
これにアクセスする方法についてのヒント、またはこれを理解するために必要なドキュメントへのリンクを提供できますか？HTMLにangular-cookies.jsファイルを含めた後$cookieStore、コントローラー（つまりfunction AccountCtrl($scope, $cookieStore)）の署名に追加しましたが、次のエラーメッセージが表示されます：不明なプロバイダー：$ cookieStoreProvider <-$ cookieStore
— Ellis Whitehead
残念ながら、私はそれを使用したことがなく、存在することを知っています。たぶん、あなたはAngularのgoogleグループに迅速な応答を求めるべきです。groups.google.com/forum/#!forum/angular
— アンドリュージョスリン
3
これは、その判明$cookieStoreどうやら、ほとんどのクライアントが生成したクッキーを対象としています。サーバー生成のCookieにアクセスするには、$cookies代わりにを使用する必要がありました。
— エリスホワイトヘッド
7
URLが古くなりました—最近では、angular-cookies-がGoogleのCDNでホストされています。ここ：ajax.googleapis.com/ajax/libs/angularjs/1.0.1/…（https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js）ブログ投稿を参照してください： blog.angularjs.org /
— 2012/07
1
この答えは、オーバー歳であり、リンクは、このサイトで、ここでの回答の要部を投稿した場合、それは良いだろう有用である、またはあなたの投稿は削除されている危険を冒しながら参照してくださいにそれはかろうじてより」ある答えを言及よくある質問リンクより」。必要に応じてリンクを含めることもできますが、これは「参照」としてのみです。答えはリンクを必要とせず、それ自体で成り立つべきです。
— タリン
3

AngularJSは、ブラウザーのCookieを使用するためのngCookiesモジュールと$ cookieStoreサービスを提供します。

cookie機能を使用するには、angular-cookies.min.jsファイルを追加する必要があります。

AngularJS Cookieのメソッドの一部を次に示します。

  • get（key）; //このメソッドは、指定されたCookieキーの値を返します。

  • getObject（key）; //このメソッドは、指定されたCookieキーの逆シリアル化された値を返します。

  • すべて取得（）; //このメソッドは、すべてのCookieを持つキー値オブジェクトを返します。

  • put（key、value、[options]）; //このメソッドは、指定されたCookieキーの値を設定します。

  • remove（key、[options]）; //このメソッドは、指定されたCookieを削除します。

例

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular-cookies.min.js"></script>
</head>
<body ng-controller="MyController">
{{cookiesUserName}} loves {{cookietechnology}}.
</body>
</html>

JavaScript

var myApp = angular.module('myApp', ['ngCookies']);
myApp.controller('MyController', ['$scope', '$cookies', '$cookieStore', '$window', function($scope, $cookies, $cookieStore, $window) {
$cookies.userName = 'Max Joe';
$scope.cookiesUserName = $cookies.userName;
$cookieStore.put('technology', 'Web');
$scope.cookietechnology = $cookieStore.get('technology'); }]);

http://www.tutsway.com/simple-example-of-cookie-in-angular-js.phpから参照を取得しました。

— マニッシュ
ソース
3

アンギュラークッキーライブラリを追加します：angular-cookies.js

$ cookiesまたは$ cookieStoreパラメーターをそれぞれのコントローラーに使用できます

メインコントローラーはこのインジェクト「ngCookies」を追加します：

angular.module("myApp", ['ngCookies']);

次のようにコントローラでCookieを使用します。

 app.controller('checkoutCtrl', function ($scope, $rootScope, $http, $state, $cookies) { 

//store cookies

 $cookies.putObject('final_total_price', $rootScope.fn_pro_per);

//Get cookies

 $cookies.getObject('final_total_price'); }
— アンクル・ラダディヤ
ソース
1

元の受け入れられた回答はjquery.cookieプラグインについて言及しています。ただし、数か月前にjs-cookieに名前が変更され、jQuery依存関係が削除されました。理由の1つは、Angularなどの他のフレームワークとの統合を容易にすることだけでした。

js-cookieをangular と統合したい場合は、次のように簡単です。

module.factory( "cookies", function() {
  return Cookies.noConflict();
});

以上です。jQueryはありません。ngCookiesはありません。

カスタムインスタンスを作成して、異なる方法で記述された特定のサーバー側Cookieを処理することもできます。たとえば、サーバー側のスペースを+パーセントエンコードする代わりにプラス記号に変換するPHPを考えてみます。

module.factory( "phpCookies", function() {
  return Cookies
    .noConflict()
    .withConverter(function( value, name ) {
      return value
            // Decode all characters according to the "encodeURIComponent" spec
            .replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent)
            // Decode the plus sign to spaces
            .replace(/\+/g, ' ')
    });
});

カスタムプロバイダーの使用法は次のようになります。

module.service( "customDataStore", [ "phpCookies", function( phpCookies ) {
  this.storeData = function( data ) {
    phpCookies.set( "data", data );
  };
  this.containsStoredData = function() {
    return phpCookies.get( "data" );
  }
}]);

これが誰にも役立つことを願っています。

この問題の詳細情報を参照してください：https : //github.com/js-cookie/js-cookie/issues/103

サーバー側と統合する方法の詳細なドキュメントについては、https：//github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.mdを参照してください。

— ファグナー・ブラック
ソース
1

$ cookiesを使用した簡単な例を次に示します。ボタンをクリックすると、Cookieが保存され、ページの再読み込み後に復元されます。

app.html：

<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-cookies.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="appController as vm">

    <input type="text" ng-model="vm.food" placeholder="Enter food" />

    <p>My favorite food is {{vm.food}}.</p>

    <p>Open new window, then press Back button.</p>
    <button ng-click="vm.openUrl()">Open</button>
</body>
</html>

app.js：

(function () {
    "use strict";

    angular.module('app', ['ngCookies'])
    .controller('appController', ['$cookies', '$window', function ($cookies, $window) {
        var vm = this;

        //get cookie
        vm.food = $cookies.get('myFavorite');

        vm.openUrl = function () {
            //save cookie
            $cookies.put('myFavorite', vm.food);
            $window.open("http://www.google.com", "_self");
        };
    }]);

})();
— ライブラブ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.