Simple Example of Get,Set and Clear Cookie in AngularJS

I am going to explain how to read,write and clear the browser cookies using angularjs. Angularjs provide the ngCookies,$cookiesStore module for this task so that include the angular-cookies.js file first before injecting ngCookies module into the application.

The below example consits of HTML textbox with ng-model directive and there are three button with ng-click directive.

-> Set Cookies : SetCookies function called when we click the set Cookies button. then the username stored in browser cookie using <code>put</code> method in the key value format.

-> Get Cookies : GetCookies function called when we click the Get Cookies button. then we <code>get</code> cookie value name(key) using get method.

-> ClearCookies : ClearCookies function called when we click the Clear Cookies button. then clear the cookie using <code>remove</code> method

$cookies

<html>
<head>
    <title>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" />

  <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 angualr-cookies.min.js 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>

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>

0 Comments

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed