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

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

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

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

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

Phone: (+91) 8800417876
Noida, 201301
Betwinner
pendik escort
kartal escort