Jak ustawić datę wygaśnięcia pliku cookie w AngularJS

1. Chcemy przechowywać informacje o autoryzacji użytkownika w pliku cookie, które nie powinny zostać utracone po odświeżeniu (F5) przeglądarki.

2. Chcemy przechowywać informacje autoryzacyjne w „trwałym pliku cookie” w przypadku, gdy użytkownik zaznaczył pole wyboru „Zapamiętaj mnie” w momencie logowania.

Jest to możliwe w wersji 1.4.0 kątowej przy użyciu ngCookies modułu:

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

Wersja 1.4: Jak wspomniano w komentarzu tutaj i innych poniżej, od wersji 1.4 natywna obsługa plików cookie w Angular zapewnia teraz możliwość edycji plików cookie:

Ze względu na 38fbe3ee $ cookies nie będzie już ujawniać właściwości, które reprezentują aktualne wartości plików cookie przeglądarki. $ cookies nie sonduje już przeglądarki pod kątem zmian w plikach cookie i nie kopiuje już wartości plików cookie do obiektu $ cookies.

Zostało to zmienione, ponieważ odpytywanie jest drogie i powoduje problemy z właściwościami $ cookies nie synchronizującymi się poprawnie z rzeczywistymi wartościami plików cookie przeglądarki (Powodem, dla którego odpytywanie zostało pierwotnie dodane było umożliwienie komunikacji między różnymi kartami, ale są na to lepsze sposoby dzisiaj , na przykład localStorage.)

Nowy interfejs API w $ cookies wygląda następująco:

get put getObject putObject getAll remove Musisz jawnie użyć powyższych metod, aby uzyskać dostęp do danych cookie. Oznacza to również, że nie możesz już obserwować właściwości $ cookies w celu wykrywania zmian zachodzących w plikach cookie przeglądarek.

Ta funkcja jest zwykle potrzebna tylko wtedy, gdy biblioteka innej firmy programowo zmieniała pliki cookie w czasie wykonywania. Jeśli polegasz na tym, musisz albo napisać kod, który będzie reagował na zmiany w plikach cookie przez bibliotekę zewnętrzną, albo zaimplementować własny mechanizm odpytywania.

Właściwa implementacja odbywa się za pośrednictwem obiektu $ cookiesProvider , który można przekazać za pośrednictwem putwywołania.

Wersja 1.3 i starsza: dla tych z Was, którzy dołożyli wszelkich starań, aby uniknąć konieczności ładowania wtyczek jQuery, wydaje się, że jest to fajny zamiennik dla angular - https://github.com/ivpusic/angular-cookie

W Angular v1.4 możesz wreszcie ustawić niektóre opcje dla plików cookie, takie jak czas wygaśnięcia. Oto bardzo prosty przykład:

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'

Jeśli sprawdzisz pliki cookie po uruchomieniu tego kodu, zobaczysz, że data wygaśnięcia zostanie prawidłowo ustawiona na plik cookie o nazwie someToken .

Przedmiotem przekazywane jako trzeci param do putfunkcji powyżej pozwala również inne opcje, takie jak ustawienia path, domaini secure. Sprawdź dokumenty aby uzyskać przegląd.

PS - Na marginesie, jeśli aktualizujesz umysł, $cookieStorektóry został wycofany, $cookiesjest to teraz jedyna metoda radzenia sobie z plikami cookie. zobacz dokumentację

Chciałbym przedstawić dodatkowy przykład, ponieważ niektórzy ludzie znają dodatkowy czas życia plików cookie. to znaczy. Chcą ustawić plik cookie na jeszcze 10 minut lub jeszcze 1 dzień.

Zwykle już wiesz, jak długo plik cookie będzie trwał w ciągu kilku sekund.

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

i możesz go odzyskać jak zwykle:

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

Jeśli jest pusty, zwraca wartość undefined.

Spinki do mankietów;

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

Możesz przejść do skryptu angular.js i zmienić
wyszukiwanie wstawiania plików cookie, self.cookies = function(name, value) { a następnie możesz zmienić kod, który dodaje plik cookie, na przykład na 7 dni

 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

Wiem, że to pytanie jest trochę stare i mam już zaakceptowaną odpowiedź.

Ale nadal obecny problem, z którym się zmagam (nie dotyczy jQuery lub czystego Javascript).

Tak więc po kilku badaniach znalazłem to: https://github.com/ivpusic/angular-cookie

Zapewnia "interfejs" podobny do $ cookieStore. I pozwala skonfigurować datę ważności (wartość i jednostki).

Jeśli chodzi o wsparcie natywne kątowe w dniu wygaśnięcia z $ cookie lub $ cookieStore, „obiecują” aktualizacje na ten temat w wersji 1.4, spójrz na to: https://github.com/angular/angular.js/pull/10530

Datę wygaśnięcia będzie można ustawić za pomocą $ cookieStore.put (...), przynajmniej proponują ...

EDYCJA: Napotkałem „problem”, nie można łączyć $ cookies z angular-cookie modular. Więc jeśli ustawisz plik cookie z ipCookie(...)odzyskaj go za pomocą, ipCookie(...)ponieważ z $ cookie to zwróci undefined.

Jak @ Vincent-briglia wskazał , istnieje jQuery drop-in, który może być używany jako obejście dopóki $cookieusługa staje się konfigurowalna - sprawdź to tutaj

Możesz użyć https://github.com/ivpusic/angular-cookie

Najpierw musisz wstrzyknąć ipCookie do swojego modułu kątowego.

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

A teraz, na przykład, jeśli chcesz go używać ze swojego kontrolera

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

Aby utworzyć plik cookie użyj

ipCookie(key, value);

Wartość obsługuje ciągi, liczby, wartości logiczne, tablice i obiekty i zostanie automatycznie przeniesiona do pliku cookie.

Możesz także ustawić dodatkowe opcje, takie jak liczba dni, w których wygasa plik cookie

ipCookie(key, value, { expires: 21 });