web-dev-qa-db-fra.com

Comment accéder aux cookies dans AngularJS?

Quel est le moyen utilisé par AngularJS pour accéder aux cookies? J'ai vu des références à la fois à un service et à un module pour les cookies, mais aucun exemple.

Existe-t-il ou n’existe-t-il pas une approche canonique pour AngularJS?

angularjsangular-cookies
234
Ellis Whitehead

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

Autre remarque, il existe une légère différence entre les deux lors de l'extraction de données, selon que vous avez utilisé $cookie pour stocker une 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, par exemple:

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

vous devriez alors être prêt à partir.

Voici un exemple minimal fonctionnel, où je montre que cookieStore est une mince enveloppe 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 les suivantes:

  1. inclure angular.js
  2. inclure angular-cookies.js
  3. injectez ngCookies dans votre module d'application (et assurez-vous de référencer ce module dans l'attribut ng-app)
  4. ajouter un paramètre $cookies ou $cookieStore au contrôleur
  5. accédez au cookie en tant que variable membre à l’aide de l’opérateur point (.) - OR -
  6. accès cookieStore en utilisant les méthodes put/get
198
Dan Doyon

Voici comment vous pouvez définir et obtenir des valeurs de cookies. C'est ce que je recherchais à l'origine lorsque 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>
70
Uri

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

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

Voir le Docs pour un aperçu de l'API. Notez également que le service de cookies a été amélioré avec certaines nouvelles fonctionnalités importantes telles que 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 antérieure, $ cookies a une syntaxe différente de celle décrite ci-dessus:

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

De même, si vous utilisez Bower, veillez à taper le nom de votre package correctement:

bower install [email protected]

où X.Y.Z est la version d’AngularJS que vous exécutez. Il y a un autre paquet dans bower "angular-cookie" (sans le 's') qui n'est pas le paquet officiel angular.

44
Maksood

Pour votre information, j'ai composé un JSFiddle de ceci en utilisant le $cookieStore, deux contrôleurs, un $rootScope et AngularjS 1.0.6. C'est sur JSFifddle as http://jsfiddle.net/krimple/9dSb2/ comme base si vous vous amusez avec ça ...

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>
12
Ken Rimple

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

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

10
Andrew Joslin

Ajouter angular cookie lib: angular-cookies.js

Vous pouvez utiliser les paramètres $ cookies ou $ cookieStore sur le contrôleur correspondant.

Le contrôleur principal ajoute cette injection 'ngCookies':

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

Utilisez les cookies dans votre contrôleur de la manière suivante:

 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 fournit le module ngCookies et le service $ cookieStore pour utiliser les cookies du navigateur.

Nous devons ajouter le fichier angular-cookies.min.js pour utiliser la fonctionnalité cookie.

Voici une méthode de AngularJS Cookie.

  • obtenir la clé); // Cette méthode retourne la valeur de la clé de cookie donnée.

  • getObject (clé); // Cette méthode retourne la valeur désérialisée de la clé de cookie donnée.

  • avoir tout(); // Cette méthode retourne un objet de valeur clé avec tous les cookies.

  • put (clé, valeur, [options]); // Cette méthode définit une valeur pour la clé de cookie donnée.

  • supprimer (clé, [options]); // Cette méthode supprime le cookie donné.

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 référence à partir de http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

2
Manish

Voici un exemple simple d'utilisation de $ 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");
        };
    }]);

})();
1
live-love

La réponse initialement acceptée mentionne plugin jquery.cookie . Cependant, il y a quelques mois, il a été renommé js-cookie et la dépendance de jQuery a été supprimée. L’une des raisons était simplement de faciliter l’intégration à d’autres frameworks, comme Angular.

Maintenant, si vous voulez intégrer js-cookie à angular, c’est aussi simple que quelque chose comme:

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

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

Vous pouvez également créer des instances personnalisées pour gérer des cookies spécifiques côté serveur écrits différemment. Prenons l'exemple de PHP, qui convertit les espaces côté serveur en un signe plus + au lieu d'un pourcentage pour le coder également:

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é ressemblerait à 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 quelqu'un.

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

Pour une documentation détaillée sur l'intégration avec le côté serveur, voir ici: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

1
Fagner Brack