Post
Ask Question

Angular Cookie Example

In this article I will disclose how to utilize Browser Cookies in AngularJS i.e. perusing esteems put away in Cookies, composing (sparing) values in Cookies and furthermore how to erase Cookies utilizing AngularJS.

AngularJS utilizes ngCookies module and $cookieStoreservice to complete the different elements of perusing, composing and evacuating Cookies.

AngularJS Cookies

Read, Write (Save) and Remove (Delete) Cookies

The beneath HTML Markup comprises of a HTML DIV to which ng-application and ng-controller AngularJS orders have been doled out.

Alongside the AngularJS JavaScript record, rakish cookies.js document additionally should be acquired keeping in mind the end goal to perform operations on Browser Cookies.

The accompanying AngularJS App makes utilization of ngCookies module and $cookieStore benefit.

Write Cookies

At the point when the Write Cookie Button is clicked, the WriteCookie capacity of the controller gets called which spares the estimation of the TextBox to a Cookie utilizing the $cookieStore administration of the ngCookies module.

The $cookieStore put work has two parameters, first the Name (Key) of the Cookie and second the Value to be put away in the Cookie.

Read Cookies

At the point when the Read Cookie Button is clicked, the ReadCookie capacity of the controller gets called which brings the estimation of the Cookie utilizing the $cookieStore administration of the ngCookies module.

The $cookieStore get work acknowledges the Name (Key) of the Cookie with a specific end goal to peruse its esteem.

Remove Cookies

At the point when the Remove Cookie Button is clicked, the RemoveCookie capacity of the controller gets called which expels the Cookie utilizing the $cookieStore administration of the ngCookies module.

The $cookieStore evacuate work acknowledges the Name (Key) of the Cookie with a specific end goal to expel the Cookie.
  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>  
  9.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-cookies.js"></script>  
  10.     <script type="text/javascript">  
  11.         var app = angular.module('MyApp', ['ngCookies']);  
  12.         app.controller('Ctrl1', function($scope, $cookieStore) {  
  13.             // Write Cookies  
  14.             $scope.EmpId = function() {  
  15.                 $cookieStore.put("EmpId", $scope.EmployeeId);  
  16.             };  
  17.             // Read Cookies  
  18.             $scope.ReadCookie = function() {  
  19.                 var abc = $cookieStore.get('EmpId');  
  20.             };  
  21.             // Remove Cookies  
  22.             $scope.RemoveCookie = function() {  
  23.                 $cookieStore.remove('EmpId');  
  24.             };  
  25.         });  
  26.     </script>  
  27.     <div ng-app="MyApp" ng-controller="Ctrl1"> Empoyee Id: <input type="text" ng-model="EmployeeId" /> <br /> <br /> <input type="button" value="Write Cookie" ng-click="WriteCookie()" /> <input type="button" value="Read Cookie" ng-click="ReadCookie()" /> <input type="button" value="Remove Cookie" ng-click="RemoveCookie()" /> </div>  
  28. </body>  
  29.   
  30. </html>  
Summary

I trust that amateurs and additionally understudies comprehend idea of Cookies in AngularJS with Example. Thanks for reading.
Next Recommended Reading Differences Between Angular 1.x & Angular v2