Comment accéder aux cookies dans AngularJS?

236

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

Existe-t-il ou non une approche canonique AngularJS?

angularjs  angular-cookies 
— Ellis Whitehead
source
1
La grande chose à propos d'angularjs est qu'en raison de son aspect d'injection de dépendances, vous pouvez vous moquer de choses comme ngCookies pour les tests unitaires. Merci d'avoir mis vos pas.
— Dan Doyon
5
@DanDoyon J'essaie d'implémenter la même chose mais dans app.js à l'intérieur de la configuration. mais je reçois "Uncaught Error: fournisseur inconnu: $ cookies" un indice.
— Anand
@ sutikshan-dubey ne voyant que votre question, pouvez-vous fournir un exemple de code?
— Dan Doyon
@DanDoyon Merci. les cookies n'ont pas résolu mon objectif, stackoverflow.com/questions/12624181/… Je l'ai corrigé en utilisant le stockage Web. Cela m'a beaucoup aidé - people.opera.com/shwetankd/external/demos/webstorage_demo.htm
— Anand
1
veuillez publier la réponse en tant que réponse au lieu de l'intégrer dans la question.
— Eliran Malka

Réponses:

200

Cette réponse a été mise à jour pour refléter la dernière version stable d'angularjs. Une note importante est qu'il $cookieStores'agit d'une enveloppe mince entourant $cookies. Ils sont à peu près les mêmes en ce sens qu'ils ne fonctionnent qu'avec des cookies de session. Bien que cela réponde à la question d'origine, vous pouvez envisager d'autres solutions, telles que l'utilisation de localstorage ou du plug-in jquery.cookie (qui vous donneraient un contrôle plus fin et feraient des cookies côté serveur. Bien sûr, le faire dans angularjs signifie que vous voudrait probablement les envelopper dans un service et les utiliser $scope.applypour 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é $cookiepour 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 ngCookiesdans votre définition d'application telle que:

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

vous devriez alors être prêt à partir.

Voici un exemple minimal fonctionnel, où je montre qu'il cookieStores'agit d'un mince emballage 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. comprendre angular.js
  2. comprendre angular-cookies.js
  3. injectez ngCookiesdans votre module d'application (et assurez-vous de référencer ce module dans l' ng-appattribut)
  4. ajouter un paramètre $cookiesou $cookieStoreau contrôleur
  5. accéder au cookie en tant que variable membre à l'aide de l'opérateur point (.) - OU -
  6. accès à l' cookieStoreaide des méthodes put / get
— Dan Doyon
source
4
Cette réponse ne fonctionne plus, vous devez utiliser $ cookieStore à la place comme décrit dans une autre réponse.
— Bill
Merci @Bill, vous avez probablement raison, avec 1,2 choses ont très probablement changé. Je vais le mettre à jour.
— Dan Doyon
J'ai mis à jour la réponse et @Bill $ cookieStore est probablement plus facile à utiliser, mais $ cookies fonctionne toujours un peu différemment
— Dan Doyon
1
Je pense qu'il y a des problèmes lors de l'utilisation de l'hôte local et des cookies). Si vous utilisez le nom de votre machine au lieu de localhost, vous aurez peut-être plus de succès.
— Dan Doyon
18
— Niklas Ekman
71

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

Notez que nous utilisons $cookieStoreau 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>
— Uri
source
45

Angular déconseillé $cookieStore dans la version 1.4.x, utilisez-le donc $cookiessi 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");

Consultez la documentation pour une présentation de l'API. Gardez également à l'esprit que le service de cookies a été amélioré avec de 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 inférieure, $ cookies a une syntaxe différente de celle ci-dessus: 

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

De plus, si vous utilisez bower, assurez-vous de taper correctement le nom de votre package: 

bower install angular-cookies@X.Y.Z

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

— Maksood
source
14

Pour info, j'ai assemblé un JSFiddle de ceci en utilisant le $cookieStore, deux contrôleurs, a $rootScopeet AngularjS 1.0.6. C'est sur JSFifddle comme 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>
— Ken Rimple
source
11

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.

— Andrew Joslin
source
2
Pourriez-vous fournir un indice sur la façon d'y accéder ou un lien vers la documentation dont j'ai besoin pour comprendre cela? Après avoir inclus le fichier angular-cookies.js dans mon HTML, j'ai ajouté $cookieStoreà la signature de mon contrôleur (c.-à-d. function AccountCtrl($scope, $cookieStore)), Mais j'ai ensuite le message d'erreur suivant: Fournisseur inconnu: $ cookieStoreProvider <- $ cookieStore
— Ellis Whitehead
Malheureusement, je ne l'ai jamais utilisé, je sais juste qu'il existe. Vous devriez peut-être demander au groupe Google Angular une réponse plus rapide. groups.google.com/forum/#!forum/angular
— Andrew Joslin
3
Il s'avère que cela $cookieStoreest principalement destiné aux cookies générés par les clients. Pour accéder aux cookies générés par le serveur, j'ai dû utiliser à la $cookiesplace.
— Ellis Whitehead
7
L'URL est devenue obsolète - de nos jours, angular-cookies - est hébergée chez Googles CDN, ici: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/… ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) Voir l'article de blog: blog.angularjs.org /
— 2012/07
1
Bien que cette réponse remonte à plus d'un an et que le lien soit utile, il serait préférable que vous publiez les parties essentielles de la réponse ici, sur ce site, ou que votre publication risque d'être supprimée Voir la FAQ où elle mentionne des réponses `` à peine plus qu'un lien ». Vous pouvez toujours inclure le lien si vous le souhaitez, mais uniquement comme «référence». La réponse doit être autonome sans avoir besoin du lien.
— Taryn
3

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 fonction de cookie.

Voici une méthode de AngularJS Cookie.

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

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

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

  • put (clé, valeur, [options]); // Cette méthode définit une valeur pour une 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 la référence de http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

— Manish
source
3

Ajouter un cookie angulaire lib: angular-cookies.js

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

Le contrôleur principal ajoute cet inject 'ngCookies':

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

Utilisez des 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'); }
— Ankur Radadiya
source
1

La réponse originale acceptée mentionne le plugin jquery.cookie . Il y a quelques mois, il a été renommé js-cookie et la dépendance jQuery a été 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 avec 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 côté serveur spécifiques qui sont écrits différemment. Prenons par exemple PHP, qui convertit les espaces côté serveur en signe plus +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 n'importe qui.

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 la façon d'intégrer avec côté serveur, voir ici: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

— Fagner Brack
source
1

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

})();
— l'amour en direct
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.