web-dev-qa-db-ja.com

AngularJSのクッキーにアクセスするには？

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

AngularJSの標準的なアプローチはありますか、ありませんか？

angularjsangular-cookies
233
Ellis Whitehead

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

もう1つ注意しなければならないのは、$cookieを使用して値を格納するのか$cookieStoreを使用するのかによって、データを取り出すときの2つの間にわずかな違いがあるということです。もちろん、どちらか一方を使いたいのです。

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にメンバー変数としてアクセスします - OR -
  6. put/getメソッドを使ってcookieStoreにアクセスする
197
Dan Doyon

これが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>
70
Uri

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

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

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

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

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

もしあなたがbowerを使っているなら、あなたのパッケージ名を正しくタイプすることを忘れないでください：

bower install [email protected]

x.Y.Zは、実行しているAngularJSのバージョンです。公式の角度パッケージではない、（ 's'を除いた） "角度付きクッキー"という別のパッケージがあります。

44
Maksood

参考までに、私は$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>
12
Ken Rimple

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

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

10
Andrew Joslin

角度クッキーlibを追加します：angular-cookies.js

あなたはそれぞれのコントローラに$ cookiesまたは$ cookieStoreパラメータを使うことができます。

メインコントローラがこれを追加します 'ngCookies'：

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

このようにあなたのコントローラでクッキーを使用してください：

 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'); }
2
Ankur Radadiya

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

クッキー機能を使用するためにangular-cookies.min.jsファイルを追加する必要があります。

これがAngularJS Cookieのいくつかの方法です。

  • 取得（キー）。 //このメソッドは、指定されたクッキーキーの値を返します。

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

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

  • put（key、value、[options]）; //このメソッドは、特定のcookieキーに値を設定します。

  • （key、[options]）を削除します。 //このメソッドは与えられたクッキーを削除します。

例

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 から参照を取りました。

2
Manish

これは$ cookiesを使った簡単な例です。ボタンをクリックすると、クッキーが保存され、ページがリロードされた後に復元されます。

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");
        };
    }]);

})();
1
live-love

元の受け入れられた答えは jquery.cookieプラグイン に言及しています。ただし、数ヶ月前には、 js-cookie に変更され、jQueryの依存関係は削除されました。その理由の1つは、Angularのような他のフレームワークと簡単に統合できるようにするためです。

さて、 js-cookie を角度付きで統合したいのであれば、次のように簡単です。

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
Fagner Brack