How to set, get and clear cookies in AngularJs?
In AngularJs, we need to use angular-cookies.js to set, get and clear the cookies.
You can use live cdn link for this:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.js
We need to include $cookies in your controller and it have to Get, Set and Clear method to get, set and clear cookies respectively.
Angular has inbuilt directives named as ngCookies.
- Writing Cookies:
The WriteCookie function of the controller gets called When the Write Cookie Button is clicked. The WriteCookie function saves the input box value as cookies, using the $cookieStore service of the ngCookies module.The $cookieStore put function has two parameters:
- Name (Key)
- Value
Syntax:
$scope.SetCookies = function () { $cookies.put("username", $scope.username); }; - Reading Cookies:
The ReadCookie function of the controller gets called when the Read Cookie Button is clicked. The ReadCookie function fetches the value of the Cookie using the $cookieStore service of the ngCookies module.
The $cookieStore get function has one parameters:
- Name (Key)
Syntax:
$scope.GetCookies = function () { $window.alert($cookies.get('username')); }; - Removing Cookies:
The RemoveCookie function of the controller gets called when the Remove Cookie Button is clicked. The RemoveCookie function removes the Cookie using the $cookieStore service of the ngCookies module.
The $cookieStore remove function has one parameters:
- Name (Key)
Syntax:
$scope.ClearCookies = function () { $cookies.remove('username'); };
Example:
<!DOCTYPE html><html> <head> <title> A Simple example of Get, Set and Clear Cookie in AngularJS </title></head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <h2>set, get and clear cookies in AngularJs</h2> <script type="text/javascript" src= </script> <script type="text/javascript" src= </script> <script type="text/javascript"> var app = angular.module('MyApp', ['ngCookies']); app.controller('CookiesController', function( $scope, $window, $cookies) { $scope.SetCookies = function() { $cookies.put("username", $scope.username); }; $scope.GetCookies = function() { $window.alert($cookies.get('username')); }; $scope.ClearCookies = function() { $cookies.remove('username'); }; }); </script> <div ng-app="MyApp" ng-controller="CookiesController"> Username: <input type="text" ng-model="username" /> <br /> <br /> <input type="button" value="Set Cookies" ng-click="SetCookies()" /> <input type="button" value="Get Cookies" ng-click="GetCookies()" /> <input type="button" value="Clear Cookies" ng-click="ClearCookies()" /> </div> </center></body> </html> |
Output:
.png)
