How to set, get and clear cookies in AngularJs?

Last Updated : 31 Jul, 2019

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

Related Articles

How to set, get and clear cookies in AngularJs?