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

Leave a Comment / php / By

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

In this post we will give you information about A Simple example of Get, Set and Clear Cookie in AngularJS. Hear we will give you detail about A Simple example of Get, Set and Clear Cookie in AngularJSAnd how to use it also give you demo for it if it is necessary.

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

      
 	
    1. <html>
      2. 
 	
    2. <head>
      3. 
 	
    3. <title>A Simple example of Get, Set and Clear Cookie in AngularJS</title>
      4. 
 	
    4. </head>
      5. 
 	
    5. <body>
      6. 
 	
    6. <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
      7. 
 	
    7. <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.js"></script>
      8. 
 	
    8. <scripttype="text/javascript">
      9. 
 	
    9.         var app = angular.module('MyApp', ['ngCookies']);
      10. 
 	
    10.         app.controller('CookiesController', function ($scope, $window, $cookies) {
      11. 
 	
    11.             $scope.SetCookies = function () {
      12. 
 	
    12.                 $cookies.put("username", $scope.username);
      13. 
 	
    13.             };
      14. 
 	
    14.             $scope.GetCookies = function () {
      15. 
 	
    15.                 $window.alert($cookies.get('username'));
      16. 
 	
    16.             };
      17. 
 	
    17.             $scope.ClearCookies = function () {
      18. 
 	
    18.                 $cookies.remove('username');
      19. 
 	
    19.             };
      20. 
 	
    20.         });
      21. 
 	
    21. </script>
      22. 
 	
    22. <divng-app="MyApp"ng-controller="CookiesController">
      23. 
 	
    23.         Username:
      24. 
 	
    24. <inputtype="text"ng-model="username"/>
      25. 
 	
    25. <br/>
      26. 
 	
    26. <br/>
      27. 
 	
    27. <inputtype="button"value="Set Cookies"ng-click="SetCookies()"/>
      28. 
 	
    28. <inputtype="button"value="Get Cookies"ng-click="GetCookies()"/>
      29. 
 	
    29. <inputtype="button"value="Clear Cookies"ng-click="ClearCookies()"/>
      30. 
 	
    30. </div>
      31. 
 	
    31. </body>
      32. 
 	
    32. </html>
      33. 

    

    <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.

      
 	
    1. <scripttype="text/javascript">
      2. 
 	
    2.         var app = angular.module('MyApp', ['ngCookies']);
      3. 
 	
    3.         app.controller('CookiesController', function ($scope, $window, $cookieStore) {
      4. 
 	
    4.             $scope.SetCookies = function () {
      5. 
 	
    5.                 $cookieStore.put("username", $scope.username);
      6. 
 	
    6.             };
      7. 
 	
    7.             $scope.GetCookies = function () {
      8. 
 	
    8.                 $window.alert($cookieStore.get('username'));
      9. 
 	
    9.             };
      10. 
 	
    10.             $scope.ClearCookies = function () {
      11. 
 	
    11.                 $cookieStore.remove('username');
      12. 
 	
    12.             };
      13. 
 	
    13.         });
      14. 
 	
    14. </script>
      15. 

    

      <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

      
 	
    1. <html>
      2. 
 	
    2. <head>
      3. 
 	
    3. <title>A Simple example of Get, Set and Clear Cookie using service factory in AngularJS</title>
      4. 
 	
    4. </head>
      5. 
 	
    5. <body>
      6. 
 	
    6. <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
      7. 
 	
    7. <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.js"></script>
      8. 
 	
    8. <scripttype="text/javascript">
      9. 
 	
    9.         var app = angular.module('MyApp', ['ngCookies']);
      10. 
 	
    10.         app.controller('CookiesController', function ($scope,userPersistenceService, $window) {
      11. 
 	
    11.             $scope.SetCookies = function () {
      12. 
 	
    12.                 userPersistenceService.setCookieData($scope.username)
      13. 
 	
    13.             };
      14. 
 	
    14.             $scope.GetCookies = function () {
      15. 
 	
    15.                 $window.alert(userPersistenceService.getCookieData('username'));
      16. 
 	
    16.             };
      17. 
 	
    17.             $scope.ClearCookies = function () {
      18. 
 	
    18.                 userPersistenceService.clearCookieData();
      19. 
 	
    19.             };
      20. 
 	
    20.         });
      21. 
 	
    21. 
 	
    22.         app.factory("userPersistenceService", [
      23. 
 	
    23.             "$cookies", function($cookies) {
      24. 
 	
    24.                 var userName = "";
      25. 
 	
    25. 
 	
    26.                 return {
      27. 
 	
    27.                     setCookieData: function(username) {
      28. 
 	
    28.                         $cookies.put("username", username);
      29. 
 	
    29.                     },
      30. 
 	
    30.                     getCookieData: function() {
      31. 
 	
    31.                         userName = $cookies.get("username");
      32. 
 	
    32.                         return userName;
      33. 
 	
    33.                     },
      34. 
 	
    34.                     clearCookieData: function() {
      35. 
 	
    35.                         username = "";
      36. 
 	
    36.                         $cookies.remove("username");
      37. 
 	
    37.                     }
      38. 
 	
    38.                 }
      39. 
 	
    39.             }
      40. 
 	
    40.         ]);
      41. 
 	
    41. 
 	
    42. </script>
      43. 
 	
    43. <divng-app="MyApp"ng-controller="CookiesController">
      44. 
 	
    44.         Username:
      45. 
 	
    45. <inputtype="text"ng-model="username"/>
      46. 
 	
    46. <br/>
      47. 
 	
    47. <br/>
      48. 
 	
    48. <inputtype="button"value="Set Cookies"ng-click="SetCookies()"/>
      49. 
 	
    49. <inputtype="button"value="Get Cookies"ng-click="GetCookies()"/>
      50. 
 	
    50. <inputtype="button"value="Clear Cookies"ng-click="ClearCookies()"/>
      51. 
 	
    51. </div>
      52. 
 	
    52. </body>
      53. 
 	
    53. </html>
      54. 
 	
    54. 
 	
    55. 
 	
    56. 
 	
    57. 

    

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

Label :

Angular JS


 jQuery


 How To

Web Development

JavaScript


Hope this code and post will helped you for implement A Simple example of Get, Set and Clear Cookie in AngularJS. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

77  +    =  82

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US