¿Cómo acceder a las cookies en AngularJS?

236

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

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

angularjs angular-cookies

— Ellis Whitehead
fuente

1

Lo mejor de angularjs es que debido al aspecto de inyección de dependencia, puede burlarse de cosas como ngCookies para pruebas unitarias. Gracias por poner tus pasos.

— Dan Doyon

55

@DanDoyon Estoy tratando de impulsar lo mismo pero en app.js dentro de la configuración. pero recibo "Error no detectado: proveedor desconocido: $ cookies" alguna pista.

— Anand

@ sutikshan-dubey solo viendo tu pregunta, ¿puedes proporcionar una muestra de código?

— Dan Doyon

@DanDoyon Gracias. las cookies no resolvieron mi problema, stackoverflow.com/questions/12624181/... Lo arreglé usando el almacenamiento web. Esto me ayudó mucho - people.opera.com/shwetankd/external/demos/webstorage_demo.htm

— Anand

1

publique la respuesta como respuesta en lugar de incluirla en la pregunta.

— Eliran Malka

200

Esta respuesta se ha actualizado para reflejar la última versión estable de angularjs. Una nota importante es que $cookieStorees un envoltorio delgado que lo rodea $cookies. Son más o menos lo mismo, ya que solo funcionan con cookies de sesión. Aunque, esto responde a la pregunta original, hay otras soluciones que puede considerar, como el uso de localstorage o el complemento jquery.cookie (que le daría un control más preciso y las cookies en el servidor. Por supuesto, hacerlo en angularjs significa que probablemente desearía incluirlos en un servicio y utilizarlos $scope.applypara notificar a angular los cambios en los modelos (en algunos casos).

Otra nota y es que hay una ligera diferencia entre los dos al extraer datos dependiendo de si solía $cookiealmacenar valor o $cookieStore. Por supuesto, realmente querrás usar uno u otro.

Además de agregar referencias al archivo js, debe inyectar ngCookiesen la definición de su aplicación, como por ejemplo:

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

entonces deberías estar listo para irte.

Aquí hay un ejemplo funcional mínimo, donde muestro que cookieStorees una envoltura delgada alrededor de las cookies:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="MyController">

  <h3>Cookies</h3>
  <pre>{{usingCookies|json}}</pre>
  <h3>Cookie Store</h3>
  <pre>{{usingCookieStore|json}}</pre>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
  <script>
    angular.module('myApp', ['ngCookies']);
    app.controller('MyController',['$scope','$cookies','$cookieStore', 
                       function($scope,$cookies,$cookieStore) {
      var someSessionObj = { 'innerObj' : 'somesessioncookievalue'};

    $cookies.dotobject = someSessionObj;
    $scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') };

    $cookieStore.put('obj', someSessionObj);
    $scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, };
    }
  </script>

</body>
</html>

Los pasos son:

incluir angular.js
incluir angular-cookies.js
inyecte ngCookiesen el módulo de su aplicación (y asegúrese de hacer referencia a ese módulo en el ng-appatributo)
agregar un parámetro $cookieso $cookieStoreal controlador
acceder a la cookie como una variable miembro utilizando el operador de punto (.) - O -
acceso cookieStoreusando métodos put / get

— Dan Doyon
fuente

44

Esta respuesta ya no funciona, necesita usar $ cookieStore como se describe en otra respuesta.

— Bill

Gracias @Bill, probablemente tengas razón, con 1.2 cosas que muy probablemente hayan cambiado. Lo actualizaré.

— Dan Doyon

Actualicé la respuesta y @Bill $ cookieStore es probablemente más fácil de usar, pero $ cookies todavía funciona de manera un poco diferente

— Dan Doyon

1

Creo que hay problemas al usar localhost y cookies). Si usa el nombre de su máquina en lugar de localhost, puede tener un mayor éxito.

— Dan Doyon

18

Use $ cookies, $ cookieStore ahora está en desuso

— Niklas Ekman

71

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

Tenga en cuenta que usamos en $cookieStorelugar de$cookies

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', ['ngCookies']);
    function CookieCtrl($scope, $cookieStore) {
      $scope.lastVal = $cookieStore.get('tab');

      $scope.changeTab = function(tabName){
          $scope.lastVal = tabName;
          $cookieStore.put('tab', tabName);
      };
    }
  </script>
</head>
<body ng-controller="CookieCtrl">
    <!-- ... -->
</body>
</html>

— Uri
fuente

45

Angular obsoleto $cookieStore en la versión 1.4.x, así que úselo en su $cookieslugar si está utilizando la última versión de angular La sintaxis sigue siendo la misma para $cookieStore& $cookies:

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

Consulte 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 e importantes como la caducidad de configuración (consulte esta respuesta ) y el dominio (consulte Documentos de CookiesProvider ).

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

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

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

bower install angular-cookies@X.Y.Z

donde XYZ es la versión de AngularJS que está ejecutando. Hay otro paquete en Bower "angular-cookie" (sin la 's') que no es el paquete angular oficial.

— Maksood
fuente

14

Para su información, armé un JSFiddle de esto usando los $cookieStoredos controladores, a $rootScopey 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

<div ng-app="myApp">
    <div id="lastVal" ng-controller="ShowerCtrl">{{ lastVal }}</div>
    <div id="button-holder" ng-controller="CookieCtrl">
        <button ng-click="bump()">Bump!</button>
    </div>
</div>

— Ken Rimple
fuente

11

http://docs.angularjs.org/api/ngCookies.$cookieStore

Asegúrese de incluir http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js para usarlo.

— Andrew Joslin
fuente

2

¿Podría dar una pista sobre cómo acceder a él o un enlace a la documentación que necesito para resolver esto? Después de incluir el archivo angular-cookies.js en mi HTML, agregué $cookieStorela firma de mi controlador (es decir function AccountCtrl($scope, $cookieStore)), pero luego recibí el siguiente mensaje de error: Proveedor desconocido: $ cookieStoreProvider <- $ cookieStore

— Ellis Whitehead

Desafortunadamente, nunca lo he usado, solo sé que existe. Tal vez deberías pedirle al grupo de Google Angular una respuesta más rápida. groups.google.com/forum/#!forum/angular

— Andrew Joslin

3

Resulta que $cookieStoreaparentemente está destinado principalmente a las cookies generadas por el cliente. Para acceder a las cookies generadas por el servidor, tuve que usar $cookiesen su lugar.

— Ellis Whitehead

77

La URL ha caducado (hoy en día, angular-cookies) está alojada en la CDN de Google , aquí: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/… ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) Ver publicación del blog: blog.angularjs.org /

— 2012/07

1

Si bien esta respuesta tiene más de un año y el enlace es útil, sería mejor si publica las partes esenciales de la respuesta aquí, en este sitio, o si su publicación corre el riesgo de ser eliminada. Consulte las Preguntas frecuentes donde menciona respuestas que son 'apenas más que un enlace ". Aún puede incluir el enlace si lo desea, pero solo como una 'referencia'. La respuesta debe ser independiente sin necesidad del enlace.

— Taryn

3

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 cookies.

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

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

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular-cookies.min.js"></script>
</head>
<body ng-controller="MyController">
{{cookiesUserName}} loves {{cookietechnology}}.
</body>
</html>

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

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

— Manish
fuente

3

Agregue la cookie angular lib: angular-cookies.js

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

El controlador principal agrega esta inyección 'ngCookies':

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

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

— Ankur Radadiya
fuente

1

La respuesta original aceptada menciona el complemento jquery.cookie . Sin embargo, hace unos meses, cambió su nombre a js-cookie. y se eliminó la dependencia de jQuery. Una de las razones fue simplemente 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 hay cookies.

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

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 para 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.

Ver 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 lado del servidor, consulte aquí: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

— Fagner Brack
fuente

1

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

app.html:

<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-cookies.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="appController as vm">

    <input type="text" ng-model="vm.food" placeholder="Enter food" />

    <p>My favorite food is {{vm.food}}.</p>

    <p>Open new window, then press Back button.</p>
    <button ng-click="vm.openUrl()">Open</button>
</body>
</html>

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

})();

— vive el amor
fuente