So legen Sie das Ablaufdatum für Cookies in AngularJS fest


80
  1. Wir möchten die Autorisierungsinformationen des Benutzers in einem Cookie speichern, das beim Aktualisieren (F5) des Browsers nicht verloren gehen sollte.

  2. Wir möchten Autorisierungsinformationen in "Permanent-Cookie" speichern, falls der Benutzer zum Zeitpunkt der Anmeldung das Kontrollkästchen "Angemeldet bleiben" aktiviert hat.


2
Zur Zeit verwende ich lokalen Speicher und Sitzungsspeicher für diesen Zweck. Ref people.opera.com/shwetankd/external/demos/webstorage_demo.htm
Anand

Antworten:


45

Dies ist im 1.4.0-Winkelbau mit dem ngCookiesModul möglich:

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

2
ist aus der Dokumentation nicht sehr klar, ob {'expires': expireDate});oder .......................................... ............ [{'expires': expireDate}]);Format sollte verwendet werden ...
Serge

2
Die Dokumentation $ cookies.put (Schlüssel, Wert, [Optionen]) [] ist eine Anmerkung für "optional". Es bedeutet nicht Array !!! Tatsächlich sagten sie, "Optionen" sei ein Objekt {a: x, b: y, c: z}, wenn Sie die Dokumentation erneut lesen.
Jenna Leaf

32

Für 1.4: Wie im Kommentar hier und in anderen unten erwähnt, bietet Angulars native Cookie-Unterstützung ab 1.4 jetzt die Möglichkeit, Cookies zu bearbeiten:

Aufgrund von 38fbe3ee machen $ Cookies keine Eigenschaften mehr verfügbar, die die aktuellen Browser-Cookie-Werte darstellen. $ cookies fragt den Browser nicht mehr nach Änderungen an den Cookies ab und kopiert keine Cookie-Werte mehr auf das $ cookies-Objekt.

Dies wurde geändert, da die Abfrage teuer ist und Probleme mit den $ Cookies-Eigenschaften verursacht hat, die nicht korrekt mit den tatsächlichen Browser-Cookie-Werten synchronisiert wurden (Der Grund, warum die Abfrage ursprünglich hinzugefügt wurde, war, die Kommunikation zwischen verschiedenen Registerkarten zu ermöglichen, aber es gibt heute bessere Möglichkeiten, dies zu tun , zum Beispiel localStorage.)

Die neue API für $ Cookies lautet wie folgt:

get put getObject putObject getAll remove Sie müssen die oben genannten Methoden explizit anwenden, um auf Cookie-Daten zugreifen zu können. Dies bedeutet auch, dass Sie die Eigenschaften von $ -Cookies nicht mehr beobachten können, um Änderungen zu erkennen, die bei den Cookies des Browsers auftreten.

Diese Funktion wird im Allgemeinen nur benötigt, wenn eine Drittanbieter-Bibliothek die Cookies zur Laufzeit programmgesteuert geändert hat. Wenn Sie sich darauf verlassen, müssen Sie entweder Code schreiben, der auf die Bibliothek von Drittanbietern reagieren kann, die Änderungen an Cookies vornimmt, oder Ihren eigenen Abfragemechanismus implementieren.

Die eigentliche Implementierung erfolgt über ein $ cookiesProvider- Objekt, das über den putAufruf übergeben werden kann.

Für 1.3 und darunter: Für diejenigen unter Ihnen, die Ihr Bestes getan haben, um das Laden von jQuery-Plugins zu vermeiden, scheint dies ein guter Ersatz für Angular zu sein - https://github.com/ivpusic/angular-cookie


Tolle Lösung bei Verwendung von Angular 1.3 oder niedriger.
vegemite4me

27

In Angular v1.4 können Sie endlich einige Optionen für die Cookies festlegen, z. B. den Ablauf. Hier ist ein sehr einfaches Beispiel:

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'

Wenn Sie Ihre Cookies nach dem Ausführen dieses Codes überprüfen, werden Sie feststellen, dass der Ablauf ordnungsgemäß auf das genannte Cookie gesetzt wird someToken.

Das Objekt übergibt als dritten param auf die putFunktion erlaubt es oben für andere Optionen , wie gut, wie Einstellung path, domainund secure. Überprüfen Sie die Dokumente für eine Übersicht.

PS - Als Randnotiz, wenn Sie Mind aktualisieren, $cookieStoredas veraltet ist, $cookiesist dies jetzt die einzige Methode, um mit Cookies umzugehen. siehe docs


15

Ich möchte ein zusätzliches Beispiel vorstellen, da einige Leute die zusätzliche Dauer der Lebensdauer von Cookies kennen. dh. Sie möchten einen Cookie so einstellen, dass er noch 10 Minuten oder 1 Tag länger hält.

Normalerweise wissen Sie bereits, wie lange der Cookie in Sekunden hält.

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

und Sie können es wie gewohnt abrufen:

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

Wenn leer, wird undefiniert zurückgegeben.

Links;

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


1
Woher kommt todaydas?
Thomas Kekeisen

Ich habe versucht, den Code schöner zu machen und habe vergessen, das Jetzt auf heute zu ändern. Jetzt sollte es in Ordnung sein.
Andreas Panagiotidis

Ich habe eine Frage. Wenn ich einen Wert aus dem Cookie erhalte, sollte ich dessen Ablaufdatum überprüfen oder $cookiesautomatisch undefiniert zurückgeben, wenn der Wert abgelaufen ist?
hadi.mansouri

3

Sie können zum Skript angle.js gehen und die
Suche zum Einfügen von Cookies ändern. self.cookies = function(name, value) { Anschließend können Sie den Code ändern, der das Cookie beispielsweise für 7 Tage hinzufügt

 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

2

Ich weiß, dass diese Frage etwas alt ist und bereits eine akzeptierte Antwort hat.

Aber immer noch ein aktuelles Problem, mit dem ich zu kämpfen habe (nicht in Bezug auf jQuery oder reines Javascript).

Nach einigen Recherchen habe ich Folgendes gefunden: https://github.com/ivpusic/angular-cookie

Welches liefert eine "Schnittstelle" ziemlich ähnlich wie $ cookieStore. Und erlaubt das Konfigurieren des Ablaufdatums (Wert und Einheiten).

Informationen zur eckigen nativen Unterstützung am Ablaufdatum mit $ cookie oder $ cookieStore. "Sie" versprechen Aktualisierungen zu diesem Thema in Version 1.4: https://github.com/angular/angular.js/pull/10530

Es wird möglich sein, das Ablaufdatum mit $ cookieStore.put (...) festzulegen, zumindest schlagen sie vor, dass ...

BEARBEITEN: Ich habe ein "Problem" festgestellt, dass Sie $ Cookies nicht mit Angular-Cookie Modular mischen können. Wenn Sie also ein Cookie setzen, mit dem Sie es ipCookie(...)abrufen, wird es ipCookie(...)mit $ cookie zurückgegeben undefined.


1

Wie @ vincent-briglia hervorhob , gibt es ein jQuery-Drop-In, das als Problemumgehung verwendet werden kann, bis der $cookieService konfigurierbar wird - sehen Sie hier nach


0

Sie können https://github.com/ivpusic/angular-cookie verwenden

Zuerst müssen Sie ipCookie in Ihr Winkelmodul injizieren.

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

Und jetzt zum Beispiel, wenn Sie es von Ihrem Controller aus verwenden möchten

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

Verwenden Sie zum Erstellen eines Cookies

ipCookie(key, value);

Der Wert unterstützt Zeichenfolgen, Zahlen, Boolesche Werte, Arrays und Objekte und wird automatisch in das Cookie serialisiert.

Sie können auch einige zusätzliche Optionen festlegen, z. B. die Anzahl der Tage, an denen ein Cookie abläuft

ipCookie(key, value, { expires: 21 });
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.