Skip to content
Related Articles

Related Articles

Improve Article

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=
        </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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :