web-dev-qa-db-fra.com

Comment définir la date d'expiration du cookie dans AngularJS

  1. Nous voulons stocker les informations d'autorisation de l'utilisateur dans un cookie qui ne devrait pas être perdu lors de l'actualisation (F5) du navigateur.

  2. Nous voulons stocker les informations d'autorisation dans "cookie permanent" si l'utilisateur a coché la case "Mémoriser mes informations" au moment de la connexion.

javascriptcookiesangularjssession-cookiesangular-cookies
78
Sutikshan Dubey

Ceci est possible dans la version 1.4.0 d'angular en utilisant le module ngCookies:

https://docs.angularjs.org/api/ngCookies/service/$cookies

angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
  // Find tomorrow's date.
  var expireDate = new Date();
  expireDate.setDate(expireDate.getDate() + 1);
  // Setting a cookie
  $cookies.put('myFavorite', 'oatmeal', {'expires': expireDate});
}]);
45
Geert van Dort

Pour 1.4: Comme indiqué dans le commentaire ci-dessous et dans d'autres ci-dessous, à partir de la version 1.4, la prise en charge des cookies natifs par Angular offre désormais la possibilité de modifier les cookies:

En raison de 38fbe3ee, $ cookies n’exposera plus les propriétés qui représentent les valeurs actuelles du cookie du navigateur. Les cookies ne sont plus des sondages le navigateur pour modifier les cookies et ne plus copier le cookie valeurs sur l'objet $ cookies.

Cela a été modifié car le sondage est coûteux et a causé des problèmes avec les propriétés $ cookies ne synchronisant pas correctement avec le valeurs réelles des cookies du navigateur (la raison de l'interrogation a été à l'origine a été ajoutée pour permettre la communication entre différents onglets, mais il existe de meilleures façons de le faire aujourd'hui, par exemple localStorage.)

La nouvelle API sur $ cookies est la suivante:

get put getObject putObject getAll remove Vous devez utiliser explicitement le méthodes ci-dessus afin d'accéder aux données de cookie. Cela signifie également que vous ne peut plus regarder les propriétés sur $ cookies pour détecter les modifications qui se produire sur les cookies des navigateurs.

Cette fonctionnalité est généralement nécessaire uniquement si une bibliothèque tierce était changer par programmation les cookies au moment de l'exécution. Si vous comptez sur cela alors vous devez soit écrire du code pouvant réagir à la 3ème partie bibliothèque modifiant les cookies ou implémente votre propre sondage mécanisme.

L'implémentation réelle est effectuée via un objet $ cookiesProvider , qui peut être transmis via l'appel put . 

Pour les versions 1.3 et inférieures: Pour ceux d’entre vous qui ont fait de leur mieux pour éviter de charger des plugins jQuery, cela semble être un bon remplacement pour angular - https://github.com/ivpusic/angular-cookie

32
streetlogics

Dans Angular v1.4, vous pouvez finally définir certaines options pour les cookies, telles que l'expiration. Voici un exemple très simple:

var now = new Date(),
    // this will set the expiration to 12 months
    exp = new Date(now.getFullYear()+1, now.getMonth(), now.getDate());

$cookies.put('someToken','blabla',{
  expires: exp
});

var cookie = $cookies.get('someToken');
console.log(cookie); // logs 'blabla'

Si vous vérifiez vos cookies après avoir exécuté ce code, vous verrez que l'expiration sera correctement définie sur le cookie nommé someToken.

L'objet transmis en tant que troisième paramètre à la fonction put ci-dessus autorise également d'autres options, telles que la définition de path, domain et secure. Vérifiez la documentation pour un aperçu.

PS - Si vous effectuez une mise à niveau, notez que $cookieStore est obsolète, de sorte que $cookies est désormais la seule méthode permettant de gérer les cookies. voir docs

26
Nobita

Je voudrais présenter un exemple supplémentaire car certaines personnes connaissent la durée de vie supplémentaire des cookies. c'est à dire. Ils veulent définir un cookie pour qu'il dure encore 10 minutes ou 1 jour de plus. 

Habituellement, vous savez déjà combien de temps le cookie durera en quelques secondes.

    var today = new Date();
    var expiresValue = new Date(today);

    //Set 'expires' option in 1 minute
    expiresValue.setMinutes(today.getMinutes() + 1); 

    //Set 'expires' option in 2 hours
    expiresValue.setMinutes(today.getMinutes() + 120); 


    //Set 'expires' option in (60 x 60) seconds = 1 hour
    expiresValue.setSeconds(today.getSeconds() + 3600); 

    //Set 'expires' option in (12 x 60 x 60) = 43200 seconds = 12 hours
    expiresValue.setSeconds(today.getSeconds() + 43200); 

    $cookies.putObject('myCookiesName', 'myCookiesValue',  {'expires' : expiresValue});

et vous pouvez le récupérer comme d'habitude: 

    var myCookiesValue = $cookies.getObject('myCookiesName');

Si vide, il retourne undefined.

Liens;

http://www.w3schools.com/jsref/jsref_obj_date.asp
https://docs.angularjs.org/api/ngCookies/provider/ $ cookiesProvider # defaults

10
Andreas Panagiotidis

Vous pouvez aller au script angular.js et changer le cookie inséré
recherchez self.cookies = function(name, value) { alors vous pourrez changer le code qui ajoute le cookie par exemple pendant 7 jours. 

 if (value === undefined) {
    rawDocument.cookie = escape(name) + "=;path=" + cookiePath +
                            ";expires=Thu, 01 Jan 1970 00:00:00 GMT";
  } else {
    if (isString(value)) {
        var now = new Date();
        var time = now.getTime();
        time += 24*60*60*1000*7;
        now.setTime(time);
         cookieLength = (rawDocument.cookie = escape(name) + '=' + escape(value) +
                 ';path=' + cookiePath+";expires="+now.toGMTString()).length + 1
3
yonia

Je sais que cette question est un peu ancienne et a déjà une réponse acceptée. 

Mais reste un problème actuel avec lequel je me bats (pas en ce qui concerne jQuery ou javascript pur).

Après quelques recherches, j’ai trouvé ceci: https://github.com/ivpusic/angular-cookie

Ce qui fournit une "interface" assez similaire à $ cookieStore. Et permet de configurer la date d'expiration (valeur et unités).

À propos du support natif angulaire à la date d’expiration avec $ cookie ou $ cookieStore, "ils" promettent des mises à jour sur ce sujet sous 1.4, examinez ceci: https://github.com/angular/angular.js/pull/10530

Il sera possible de définir la date d'expiration avec $ cookieStore.put (...), au moins ils proposent que ...

EDIT: J'ai rencontré un "problème": vous ne pouvez pas mélanger $ cookies avec angular-cookie modular. Donc, si vous définissez un cookie avec ipCookie(...), récupérez-le avec ipCookie(...) car avec $ cookie, il retournera undefined.

2
Paulo Oliveira

Comme @ vincent-briglia a souligné , il existe un système d’installation jQuery qui peut être utilisé comme solution de contournement jusqu’à ce que le service $cookie devienne configurable - consultez-le ici

1
Jan Molak

Vous pouvez utiliser https://github.com/ivpusic/angular-cookie

Vous devez d’abord injecter ipCookie dans votre module angulaire.

var myApp = angular.module('myApp', ['ipCookie']);

Et maintenant, par exemple si vous voulez l'utiliser depuis votre contrôleur

myApp.controller('cookieController', ['$scope', 'ipCookie', function($scope, ipCookie) {
  // your code here
}]);

Pour créer un cookie, utilisez

ipCookie(key, value);

La valeur prend en charge les chaînes, les nombres, les booléens, les tableaux et les objets et sera automatiquement sérialisée dans le cookie.

Vous pouvez également définir des options supplémentaires, telles que le nombre de jours d’expiration d’un cookie.

ipCookie(key, value, { expires: 21 });
0
Andy M.