Cómo establecer la fecha de vencimiento de la cookie en AngularJS


81
  1. Queremos almacenar la información de autorización del usuario en una cookie que no debe perderse al actualizar (F5) el navegador.

  2. Queremos almacenar la información de autorización en "cookie permanente" en caso de que el usuario haya optado por la casilla de verificación "Recordarme" en el momento de iniciar sesión.


2
Por el momento, estoy usando almacenamiento local y almacenamiento de sesiones para este propósito Ref people.opera.com/shwetankd/external/demos/webstorage_demo.htm
Anand

Respuestas:


46

Esto es posible en la compilación 1.4.0 de angular usando el ngCookiesmódulo:

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
no está muy claro en la documentación si {'expires': expireDate});o .......................................... ............ [{'expires': expireDate}]);formato debe usarse ...
Serge

2
La documentación $ cookies.put (clave, valor, [opciones]) [] es una anotación para "opcional". ¡No significa matriz! De hecho, dijeron que "opciones" es un objeto {a: x, b: y, c: z} si lee la documentación nuevamente.
Jenna Leaf

32

Para 1.4: como se indica en el comentario aquí y otros a continuación, a partir de 1.4, el soporte de cookies nativas de Angular ahora brinda la capacidad de editar cookies:

Debido a 38fbe3ee, $ cookies ya no expondrán propiedades que representen los valores actuales de cookies del navegador. $ cookies ya no sondea el navegador en busca de cambios en las cookies y ya no copia los valores de las cookies en el objeto $ cookies.

Esto se cambió porque el sondeo es costoso y causó problemas con las propiedades de $ cookies que no se sincronizaron correctamente con los valores reales de las cookies del navegador (la razón por la que el sondeo se agregó originalmente fue para permitir la comunicación entre diferentes pestañas, pero hay mejores formas de hacerlo hoy , por ejemplo localStorage.)

La nueva API en $ cookies es la siguiente:

get put getObject putObject getAll remove Debe utilizar explícitamente los métodos anteriores para acceder a los datos de las cookies. Esto también significa que ya no puede ver las propiedades de $ cookies para detectar cambios que ocurren en las cookies de los navegadores.

Por lo general, esta función solo es necesaria si una biblioteca de terceros estaba cambiando las cookies mediante programación en tiempo de ejecución. Si confía en esto, debe escribir un código que pueda reaccionar a la biblioteca de terceros que realiza los cambios en las cookies o implementar su propio mecanismo de sondeo.

La implementación real se realiza a través de un objeto $ cookiesProvider , que se puede pasar a través de la putllamada.

Para 1.3 y menos: para aquellos de ustedes que han hecho todo lo posible para evitar tener que cargar complementos de jQuery, este parece ser un buen reemplazo para angular: https://github.com/ivpusic/angular-cookie


Gran solución al usar Angular 1.3 o inferior.
vegemite4me

27

En Angular v1.4 finalmente puede configurar algunas opciones para las cookies, como la caducidad. Aquí tienes un ejemplo muy 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 revisa sus cookies después de ejecutar este código, verá que la caducidad se configurará correctamente para la cookie nombrada someToken.

El objeto pasado como tercer parámetro a la putfunción anterior permite otras opciones también, como el ajuste path, domainy secure. Consulte los documentos para obtener una descripción general.

PD : como nota al margen, si está actualizando la mente que $cookieStoreha quedado obsoleta, $cookiesahora es el único método para lidiar con las cookies. ver documentos


15

Me gustaría presentar un ejemplo adicional, ya que algunas personas conocen la duración adicional de la vida útil de las cookies. es decir. Quieren configurar una cookie para que dure 10 minutos más o 1 día más.

Por lo general, ya sabe cuánto más durará la cookie en segundos.

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

y puedes recuperarlo como de costumbre:

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

Si está vacío, devuelve undefined.

Enlaces;

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


1
De donde todayviene
Thomas Kekeisen

Traté de hacer el código más agradable y olvidé cambiar todos los 'ahora' por hoy. Ahora debería estar bien.
Andreas Panagiotidis

Tengo una pregunta. Cuando obtengo valor de la cookie, ¿debo verificar su fecha de vencimiento o $cookiesdevuelve automáticamente undefined si el valor está vencido?
hadi.mansouri

3

Puede ir al script angular.js y cambiar la cookie de inserción
búsqueda de para self.cookies = function(name, value) { luego cambiar el código que agrega la cookie, por ejemplo, durante 7 días

 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

Sé que esta pregunta es un poco antigua y ya tengo una respuesta aceptada.

Pero sigue siendo un problema actual con el que estoy luchando (no con respecto a jQuery o Javascript puro).

Entonces, después de algunas investigaciones, encontré esto: https://github.com/ivpusic/angular-cookie

Lo que ofrece una "interfaz" bastante similar a $ cookieStore. Y permite configurar la fecha de caducidad (valor y unidades).

Acerca del soporte nativo angular en la fecha de vencimiento con $ cookie o $ cookieStore, "ellos" prometen actualizaciones sobre este tema en 1.4, mire esto: https://github.com/angular/angular.js/pull/10530

Será posible establecer la fecha de vencimiento con $ cookieStore.put (...), al menos proponen que ...

EDITAR: Encontré un "problema" que no puede mezclar $ cookies con angular-cookie modular. Entonces, si configura una cookie, ipCookie(...)recupérela con ipCookie(...)porque con $ cookie regresará undefined.



0

Puede utilizar https://github.com/ivpusic/angular-cookie

Primero necesitas inyectar ipCookie en tu módulo angular.

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

Y ahora, por ejemplo, si quieres usarlo desde tu controlador

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

Para crear un uso de cookies

ipCookie(key, value);

El valor admite cadenas, números, valores booleanos, matrices y objetos y se serializará automáticamente en la cookie.

También puede configurar algunas opciones adicionales, como el número de días en que caduca una cookie

ipCookie(key, value, { expires: 21 });
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.