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= 
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"> 
        </script> 
        <script type="text/javascript" 
                src= 
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.js"> 
        </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:

My Personal Notes

Recommended Posts: