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: