A Simple example of Get, Set and Clear Cookie in AngularJS

Posted 7 years ago By Ajay Gupta 301721

In this tutorial, you will learn how to read and write browser cookies in Angularjs with example.

Angularjs provides ngCookies modules to do this task so include angular-cookies.js file first before injecting ngCookies module into your application.

Using $cookies service, you can read browser cookies, write values in browser cookies and delete browser cookies.

This Angularjs App consits of HTML textbox with ng-model directive and there are three button with ng-click directive.

Set Cookies : When you click Set Cookies button then SetCookies function will be called and a new value entered by you will be saved into browser cookie using put method in key value format.
Get Cookies : When you click Get Cookies button then GetCookies function will be called and you will get value stored in cookies using get method that accept the name(key) of cookie.
ClearCookies : When you click Clear Cookies button then ClearCookies function will be called that remove the cookie using remove method that accept the name(key) of cookie.

$cookies

<html>
<head>
    <title>A Simple example of Get, Set and Clear Cookie in AngularJS</title>
</head>
<body>
    <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>
</body>
</html>

<html>
<head>
    <title>A Simple example of Get, Set and Clear Cookie in AngularJS</title>
</head>
<body>
    <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>
</body>
</html>

$cookiesStore

$cookiesStore feature is available in same angular-cookies.min.js file and use same get(), put() and remove() method.

  <script type="text/javascript">
        var app = angular.module('MyApp', ['ngCookies']);
        app.controller('CookiesController', function ($scope, $window, $cookieStore) {
            $scope.SetCookies = function () {
                $cookieStore.put("username", $scope.username);
            };
            $scope.GetCookies = function () {
                $window.alert($cookieStore.get('username'));
            };
            $scope.ClearCookies = function () {
                $cookieStore.remove('username');
            };
        });
    </script>

  <script type="text/javascript">
        var app = angular.module('MyApp', ['ngCookies']);
        app.controller('CookiesController', function ($scope, $window, $cookieStore) {
            $scope.SetCookies = function () {
                $cookieStore.put("username", $scope.username);
            };
            $scope.GetCookies = function () {
                $window.alert($cookieStore.get('username'));
            };
            $scope.ClearCookies = function () {
                $cookieStore.remove('username');
            };
        });
    </script>

Using service Factory

<html>
<head>
    <title>A Simple example of Get, Set and Clear Cookie using service factory in AngularJS</title>
</head>
<body>
    <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,userPersistenceService, $window) {
            $scope.SetCookies = function () {
                userPersistenceService.setCookieData($scope.username)
            };
            $scope.GetCookies = function () {
                $window.alert(userPersistenceService.getCookieData('username'));
            };
            $scope.ClearCookies = function () {
                userPersistenceService.clearCookieData();
            };
        });
        app.factory("userPersistenceService", [
            "$cookies", function($cookies) {
                var userName = "";
                return {
                    setCookieData: function(username) {
                        $cookies.put("username", username);
                    },
                    getCookieData: function() {
                        userName = $cookies.get("username");
                        return userName;
                    },
                    clearCookieData: function() {
                        username = "";
                        $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>

<html>
<head>
    <title>A Simple example of Get, Set and Clear Cookie using service factory in AngularJS</title>
</head>
<body>
    <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,userPersistenceService, $window) {
            $scope.SetCookies = function () {
                userPersistenceService.setCookieData($scope.username)
            };
            $scope.GetCookies = function () {
                $window.alert(userPersistenceService.getCookieData('username'));
            };
            $scope.ClearCookies = function () {
                userPersistenceService.clearCookieData();
            };
        });

        app.factory("userPersistenceService", [
            "$cookies", function($cookies) {
                var userName = "";

                return {
                    setCookieData: function(username) {
                        $cookies.put("username", username);
                    },
                    getCookieData: function() {
                        userName = $cookies.get("username");
                        return userName;
                    },
                    clearCookieData: function() {
                        username = "";
                        $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>

Show Demo

A Simple example of Get, Set and Clear Cookie in AngularJS

A Simple example of Get, Set and Clear Cookie in AngularJS

Tags :

Related Posts

Angularjs Form Submit Example

How to apply Search Sort and Pagination in AngularJS Example using dir-pagination-controls

Using ngController With ngRepeat In AngularJS to List Items in Table Example

Angularjs two way data binding with directive isolate scope binding example

AngularJS Remove Hashtag From The Routing URL – $locationProvider

AngularJS PHP - upload and display image using FileReader with example

Understanding AngularJS Controllers and scope inheritance with example

AngularJS - How to Create a Custom Slugify Filter for SEO friendly URL

Dependent Dynamic dropdown using Angular Js and Laravel 5.6