How to set, get and clear cookies in AngularJs?

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)ValueSyntax:$scope.SetCookies = function () {
    $cookies.put("username", $scope.username);
};

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'));
};

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');
};

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:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Routing in Angular 9/10
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to setup 404 page in angular routing ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?