How to set, get and clear cookies in AngularJS ?

Last Updated : 08 Sep, 2022

In this article, we will see how to set, get & clear the Cookies in AngularJS, along with understanding the basic usage through the implementation. In AngularJS, we need to use angular-cookies.js to set, get and clear the cookies. You can use the 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 has 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 parameter:

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 parameter:

Name (Key)

Syntax:

$scope.ClearCookies = function () {
    $cookies.remove('username');
};

Example: This example illustrates to set, get & clear cookies in AngularJS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        A Simple example of Get, Set 
        and Clear Cookie in AngularJS 
    </title> 
    <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> 
</head> 
  
<body style="text-align: center"> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <h2>set, get and clear cookies in AngularJs</h2> 
  
    <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> 
</body> 
</html>