Crear, Leer y Eliminar Cookies en Angular JS (1.4.3)

2 minuto(s)

En esta página:

Demo Github

Demo Github

Si estamos trabajando con Sesiones con algún lenguaje de servidor como PHP u otro, podemos gestionar los cookies mediante angular JS.

Angular JS el Framework MVC Javascript creado por Google nos provee un servicio llamado $cookies, este nos da la posibilidad de agregar, leer y eliminar una cookie en los navegadores.

Nota: Cuando ejecutes la Demo, usa Google Chrome, cuando agregues la Cookie presiona F12 y en Resources damos botón derecho del mouse y click en Refresh para ver la cookie agregada, lo mismo cuando sea eliminada:

Tengo un elemento ng-app con la vista angular JS para la demo dentro de el index.html:


<h1><strong>index.html</strong></h1>
<div>
   <div class="form-group">
      <div class="row">
         <div class="col-md-3"></div>
         <div class="col-md-6"><label for="cookie">Ingresa una Cookie:</label></div>
         <div class="col-md-3"></div>
      </div>
   </div>
   <div class="row" align="center">
      <div class="col-md-12">
         <strong><i>Cookie:</i></strong> <span id="cookietxt"> {{ Postre }} </span>
         <button type="button" class="btn btn-info" id="crearcookie">Agregar</button> <button type="button" class="btn btn-success" id="leercookie">Leer</button> <button type="button" class="btn btn-danger" id="eliminarcookie">Eliminar</button>
      </div>
   </div>
</div>

<h1><strong>index.html</strong></h1>

<div>

<div class="col-md-6"><label for="cookie">Ingresa una Cookie:</label></div>

</div>

<strong><i>Cookie:</i></strong> <span id="cookietxt"> {{ Postre }} </span>

<button type="button" class="btn btn-info" id="crearcookie">Agregar</button> <button type="button" class="btn btn-success" id="leercookie">Leer</button> <button type="button" class="btn btn-danger" id="eliminarcookie">Eliminar</button>

</div>

Ahora creamos el contenido de nuestro archivo script.js

script.js


var app = angular.module('Postres', ['ngCookies']);
app.controller('PostresController', function ($scope, $window, $cookieStore) {
 $scope.WriteCookie = function () {
 $cookieStore.put("Postre", $scope.Postre);
 $window.alert("Cookie Creado");
 };
 $scope.ReadCookie = function () {
 $window.alert("Cookie: " + $cookieStore.get('Postre'));
 };
 $scope.RemoveCookie = function () {
 $cookieStore.remove('Postre');
 $window.alert("Cookie Eliminado");
 location.reload();
 };
});

var app = angular.module('Postres', ['ngCookies']);

app.controller('PostresController', function ($scope, $window, $cookieStore) {

$scope.WriteCookie = function () {

$cookieStore.put("Postre", $scope.Postre);

$window.alert("Cookie Creado");

};

$scope.ReadCookie = function () {

$window.alert("Cookie: " + $cookieStore.get('Postre'));

};

$scope.RemoveCookie = function () {

$cookieStore.remove('Postre');

$window.alert("Cookie Eliminado");

location.reload();

};

});

Para que todo funcione correctamente, llamare a la librería Angular Cookies junto con Angular 1.4.3 en mi vista HTML:


<!-- Angular -->
<script src= "https://code.angularjs.org/1.4.3/angular.min.js" type="text/javascript"></script>

<!-- Angular Cookies -->
<script src="https://code.angularjs.org/1.4.3/angular-cookies.js" type="text/javascript"></script>

Listo !

Espero les sirva de mucho el Tutorial.

Sígueme en Twitter: @pepoflex

Hasta nuestro siguiente artículo !

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos