How to set, get and clear cookies in AngularJS ?

Last Updated : 02 Aug, 2024

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>

Output:

How to update an array element in AngularJS ?

shiva9610

Improve

Article Tags :

How to set, get and clear cookies in AngularJS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?