¿Cómo acceder a las cookies en AngularJS?

¿Cuál es la forma de acceso de AngularJS a las cookies? He visto referencias tanto a un servicio como a un módulo para cookies, pero no ejemplos.

¿Existe, o no existe, un enfoque canónico AngularJS?

Esta respuesta se ha actualizado para reflejar la última versión estable de angularjs. Una nota importante es que $cookieStore es una envoltura delgada que rodea $cookies . Son prácticamente lo mismo, ya que solo funcionan con cookies de sesión. Aunque esto responde a la pregunta original, hay otras soluciones que quizás desee considerar, como el uso de localstorage o el complemento jquery.cookie (que le daría un control más preciso y cookies en el servidor. Por supuesto, hacerlo en angularjs significa que probablemente querría envolverlos en un servicio y usar $scope.apply para notificar el angular de los cambios en los modelos (en algunos casos).

Otra nota y es que hay una pequeña diferencia entre los dos al extraer los datos dependiendo de si $cookieStore $cookie para almacenar valor o $cookieStore . Por supuesto, realmente querrías usar uno u otro.

Además de agregar una referencia al archivo js, ​​debe ngCookies en la definición de su aplicación, como:

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

entonces deberías ser bueno para ir.

Aquí hay un ejemplo mínimo funcional, donde muestro que cookieStore es un envoltorio delgado alrededor de las cookies:

       

Cookies

{{usingCookies|json}}

Cookie Store

{{usingCookieStore|json}}

Los pasos son:

  1. incluir angular.js
  2. incluir angular-cookies.js
  3. ngCookies en tu módulo de aplicación (y asegúrate de hacer referencia a ese módulo en el atributo ng-app )
  4. agregue un parámetro $cookies o $cookieStore al controlador
  5. acceda a la cookie como una variable miembro usando el operador de punto (.) – O –
  6. acceder a cookieStore usando los métodos put / get

Así es como puedes establecer y obtener los valores de las cookies. Esto es lo que estaba buscando originalmente cuando encontré esta pregunta.

Tenga en cuenta que usamos $cookieStore lugar de $cookies

            

Angular desaprobó $cookieStore en la versión 1.4.x, así que use $cookies en su lugar si está utilizando la última versión de angular. La syntax sigue siendo la misma para $cookieStore y $cookies :

 $cookies.put("key", "value"); var value = $cookies.get("key"); 

Consulta los Documentos para obtener una descripción general de la API. Tenga en cuenta también que el servicio de cookies se ha mejorado con algunas características nuevas importantes, como la configuración de caducidad (consulte esta respuesta ) y el dominio (consulte CookiesProvider Docs ).

Tenga en cuenta que, en la versión 1.3.xo inferior, $ cookies tiene una syntax diferente a la anterior:

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

Además, si está utilizando bower, asegúrese de escribir correctamente el nombre de su paquete:

 bower install angular-cookies@XYZ 

donde XYZ es la versión AngularJS que está ejecutando. Hay otro paquete en bower “cookie angular” (sin la ‘s’) que no es el paquete angular oficial.

FYI, armé un JSFiddle de esto usando $cookieStore , dos controladores, $rootScope y AngularjS 1.0.6. Está en JSFifddle como http://jsfiddle.net/krimple/9dSb2/ como base si estás jugando con esto …

La esencia de esto es:

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

 
{{ lastVal }}

AngularJS proporciona el módulo ngCookies y el servicio $ cookieStore para usar las cookies del navegador.

Necesitamos agregar el archivo angular-cookies.min.js para usar la función de cookie.

Aquí hay algún método de Cookie AngularJS.

  • obtener la clave); // Este método devuelve el valor de la clave de cookie dada.

  • getObject (clave); // Este método devuelve el valor deserializado de la clave de cookie dada.

  • obtener toda(); // Este método devuelve un objeto de valor clave con todas las cookies.

  • put (clave, valor, [opciones]); // Este método establece un valor para la clave de cookie dada.

  • eliminar (clave, [opciones]); // Este método elimina la cookie dada.

Ejemplo

Html

        {{cookiesUserName}} loves {{cookietechnology}}.   

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

He tomado referencia de http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

Añadir cookie angular lib: angular-cookies.js

Puede usar $ cookies o el parámetro $ cookieStore para el controlador respectivo

El controlador principal agrega esto inject ‘ngCookies’:

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

Use las cookies en su controlador de esta manera:

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

La respuesta original aceptada menciona el complemento jquery.cookie . Sin embargo, hace unos meses, se renombró a js-cookie y se eliminó la dependencia jQuery. Una de las razones fue solo para facilitar la integración con otros marcos, como Angular.

Ahora, si desea integrar js-cookie con angular, es tan fácil como algo como:

 module.factory( "cookies", function() { return Cookies.noConflict(); }); 

Y eso es. No jQuery. No ngCookies.


También puede crear instancias personalizadas para manejar cookies específicas del servidor que se escriben de manera diferente. Tomemos por ejemplo PHP, que convierte los espacios en el lado del servidor a un signo más + lugar de también un porcentaje de encoding:

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

El uso de un proveedor personalizado sería algo como esto:

 module.service( "customDataStore", [ "phpCookies", function( phpCookies ) { this.storeData = function( data ) { phpCookies.set( "data", data ); }; this.containsStoredData = function() { return phpCookies.get( "data" ); } }]); 

Espero que esto ayude a cualquiera.

Vea información detallada en este número: https://github.com/js-cookie/js-cookie/issues/103

Para obtener documentos detallados sobre cómo integrarse con el servidor, consulte aquí: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

Aquí hay un ejemplo simple usando $ cookies. Después de hacer clic en el botón, la cookie se guarda y luego se restaura después de que la página se vuelve a cargar.

app.html:

          

My favorite food is {{vm.food}}.

Open new window, then press Back button.

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