Comment accéder aux cookies dans AngularJS?

Question

Comment accéder aux cookies dans AngularJS?

Quelle est la façon AngularJS d'accéder aux cookies? J'ai vu des références à la fois à un service et à un module pour les cookies, mais pas d'exemples.

Y a-t-il, ou n'y a-t-il pas une approche canonique AngularJS?

229

angular-cookies angularjs

demandé sur Benjamin Gruenbaum 2012-06-09 18:50:48

9 réponses

score 195 · Answer 1

Cette réponse a été mise à jour pour refléter la dernière version stable d'angularjs. Une note importante est que $cookieStore est une enveloppe mince entourant $cookies. Ils sont à peu près les mêmes en ce sens qu'ils ne fonctionnent qu'avec les cookies de session. Bien que cela réponde à la question initiale, il existe d'autres solutions que vous pouvez envisager, telles que l'utilisation de localstorage ou de jquery.plugin cookie (qui vous donnerait un contrôle plus fin et ferait des cookies côté serveur. Bien sûr le faire dans angularjs signifie que vous je voudrais probablement les envelopper dans un service et utiliser $scope.apply pour notifier angular des modifications apportées aux modèles (dans certains cas).

Une autre note et c'est qu'il y a une légère différence entre les deux lors de l'extraction des données selon que vous avez utilisé $cookie pour stocker la valeur ou $cookieStore. Bien sûr, vous voudriez vraiment utiliser l'un ou l'autre.

En plus d'ajouter une référence au fichier js, vous devez injecter ngCookies dans la définition de votre application telle que:

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

Vous devriez alors être bon pour aller.

Voici un exemple minimal fonctionnel, où je montre que cookieStore est un emballage mince autour des cookies:

<!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>

Les étapes sont:

inclure angular.js
inclure angular-cookies.js
injectez ngCookies dans votre module d'application (et assurez-vous de référencer ce module dans l'attribut ng-app)
ajoutez un paramètre $cookies ou $cookieStore au contrôleur
accédez au cookie en tant que variable membre en utilisant le point (.) opérateur -- Ou ...
accès cookieStore utiliser les méthodes put/get

score 69 · Answer 2

Voici comment vous pouvez définir et obtenir des valeurs de cookie. C'est ce que je cherchais à l'origine quand j'ai trouvé cette question.

Notez que nous utilisons $cookieStore au lieu de $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>

score 41 · Answer 3

Angulaire obsolète $cookieStore dans la version 1.4.x, utilisez donc $cookies à la place si vous utilisez la dernière version d'angular. La syntaxe reste la même pour $cookieStore & $cookies:

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

Voir les documents pour une vue d'ensemble de L'API. Rappelez-vous également que le service de cookies a été amélioré avec de nouvelles fonctionnalités importantes comme la définition de l'expiration (voir cette réponse ) et le domaine (Voir CookiesProvider Docs).

Notez que, dans la version 1.3.x ou ci-dessous, $cookies a un autre syntaxe que ci-dessus:

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

Aussi, si vous utilisez bower, assurez-vous de taper correctement le nom de votre paquet:

bower install angular-cookies@X.Y.Z

Où X. Y. Z est la version AngularJS que vous utilisez. Il y a un autre paquet dans bower "angular-cookie"(sans le "s") qui n'est pas le paquet angulaire officiel.

score 12 · Answer 4

POUR INFO, j'ai mis en place un JSFiddle de ceci en utilisant le $cookieStore, Deux contrôleurs, un $rootScope, et AngularjS 1.0.6. C'est sur JSFifddle comme http://jsfiddle.net/krimple/9dSb2/ comme base si vous déconnez avec ceci...

L'essentiel est:

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>

score 10 · Answer 5

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

Assurez-vous d'inclure http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js pour l'utiliser.

score 2 · Answer 6

AngularJS fournit le module ngCookies et le service $ cookieStore pour utiliser les Cookies du navigateur.

Nous devons ajouter des cookies angulaires.min.fichier js à utiliser la fonctionnalité de cookie.

Voici une méthode de Cookie AngularJS.

Get (key); / / cette méthode renvoie la valeur de la clé de cookie donnée.
GetObject (key); / / cette méthode renvoie la valeur désérialisée de témoin clé.
GetAll (); / / cette méthode renvoie un objet key value avec tous le cookies.
Put(key, value, [options]); //cette méthode définit une valeur pour témoin clé.
Supprimer(touche [options]); //Cette méthode de supprimer cookie.

Exemple

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

J'ai pris la référence de http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

score 2 · Answer 7

Ajouter Angular cookie lib: Angular-cookies.js

Vous pouvez utiliser le paramètre $ cookies ou $ cookieStore pour le contrôleur respectif

Contrôleur principal ajouter cette injection 'ngCookies':

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

Utilisez les Cookies dans votre contrôleur comme ceci:

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

score 1 · Answer 8

La réponse acceptée originale mentionne jquery.plugin cookie . Il y a quelques mois cependant, il a été renommé en js-cookie et la dépendance jQuery supprimée. L'une des raisons était simplement de faciliter l'intégration avec D'autres frameworks, comme Angular.

Maintenant, si vous souhaitez intégrer js-cookie angulaire, il est aussi facile que quelque chose comme:

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

Et c'est tout. Pas de jQuery. Pas de ngCookies.

Vous pouvez également créer des instances personnalisées pour Gérer les cookies spécifiques côté serveur qui sont écrits différemment. Prenez par exemple PHP, qui convertit les espaces in the server-side to a plus sign + au lieu de le coder en pourcentage:

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, ' ')
    });
});

L'utilisation d'un Fournisseur personnalisé serait quelque chose comme ceci:

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

J'espère que cela aide tout le monde.

Voir les informations détaillées dans ce numéro: https://github.com/js-cookie/js-cookie/issues/103

Pour des documents détaillés sur l'intégration Côté Serveur, voir ici: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

score 1 · Answer 9

Voici un exemple simple utilisant $ cookies. Après avoir cliqué sur le bouton, le cookie est enregistré, puis restauré après le rechargement de la page.

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

})();

Las etiquetas más populares

Comment accéder aux cookies dans AngularJS?

9 réponses