237

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

AngularJS の標準的なアプローチはありますか、それともありませんか?

4

9 に答える 9

200

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

もう1つの注意点は、$cookie値を格納するために使用したか、$cookieStore. もちろん、どちらか一方を使用することをお勧めします。

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

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

これで準備完了です。

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

<!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. $cookiesor$cookieStoreパラメータをコントローラに追加する
  5. ドット (.) 演算子を使用してメンバー変数として Cookie にアクセスする -- または --
  6. cookieStoreput/get メソッドを使用したアクセス
于 2012-06-11T18:47:24.847 に答える
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>
于 2013-04-04T17:18:43.630 に答える
48

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

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

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

バージョン 1.3.x 以下では、$cookies の構文が上記とは異なることに注意してください。

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

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

bower install angular-cookies@X.Y.Z

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

于 2015-05-12T21:54:43.200 に答える
14

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

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

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>
于 2013-07-11T15:47:22.930 に答える
11

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

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

于 2012-06-09T20:40:35.800 に答える
3

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

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

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

  • 取得 (キー); // このメソッドは、指定された Cookie キーの値を返します。

  • getObject(キー); //このメソッドは、指定された Cookie キーのデシリアライズされた値を返します。

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

  • put (キー、値、[オプション]); //このメソッドは、指定された Cookie キーの値を設定します。

  • remove(キー, [オプション]); //このメソッドは、指定された 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から参照を取得しました。

于 2015-10-02T03:19:41.867 に答える