ngcookies - ¿Cómo acceder a las cookies en AngularJS?
directivas personalizadas angularjs (9)
Agregue angular cookie 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''); }
¿Cuál es la forma AngularJS de acceder a las cookies? He visto referencias tanto a un servicio como a un módulo para cookies, pero no hay ejemplos.
¿Hay, o no hay un enfoque canónico AngularJS?
Angular desaprobado $cookieStore en la versión 1.4.x, entonces use $cookies en su lugar si está usando la última versión de angular. La sintaxis permanece igual para $cookieStore y $cookies :
$cookies.put("key", "value");
var value = $cookies.get("key");
Ver los Docs para 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 la configuración (consulte esta respuesta ) y el dominio (consulte el documento CookiesProvider ).
Tenga en cuenta que, en la versión 1.3.xo posterior, $ 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 de su paquete correctamente:
bower install [email protected]
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.
AngularJS proporciona el módulo ngCookies y el servicio $ cookieStore para usar 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 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.
poner (clave, valor, [opciones]); // Este método establece un valor para una 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''); }]);
He tomado la referencia de http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .
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 se recarga 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");
};
}]);
})();
Así es como puede establecer y obtener valores de cookie. Esto es lo que originalmente estaba buscando cuando encontré esta pregunta.
Tenga en cuenta que usamos $cookieStore lugar 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>
La respuesta original aceptada menciona el complemento jquery.cookie . Sin embargo, hace unos meses, se le cambió el nombre a js-cookie y se eliminó la dependencia 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 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 codificarlo 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.
Consulte la 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
Para su información, 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
<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>
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.
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 a $cookies . Son prácticamente iguales en cuanto a que solo funcionan con cookies de sesión. Aunque, esto responde a la pregunta original, hay otras soluciones que tal vez desee considerar, como usar localstorage o jquery.cookie plugin (que le daría un control más detallado y hacer cookies en el servidor. Por supuesto, hacerlo en angularjs significa que probablemente querría envolverlos en un servicio y usar $scope.apply para notificar 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 usó $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 funcional mínimo, donde muestro que cookieStore es 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:
- incluye
angular.js - incluye
angular-cookies.js - inyecte
ngCookiesen el módulo de su aplicación (y asegúrese de hacer referencia a ese módulo en el atributong-app) - agregue un parámetro
$cookieso$cookieStoreal controlador - acceda a la cookie como una variable miembro utilizando el operador de punto (.) - O -
- acceder a
cookieStoreutilizando los métodos de poner / obtener