Introduction To AngularJS: Cookies - Day Twenty Three

In this article you will learn about Cookies in AngularJS.

In this 23rd day of AngularJS article series, we are going to be learning next key players/concept of AngularJS, understanding the concept of Cookies in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8
  9. Introduction to AngularJS – Day 9
  10. Introduction to AngularJS – Day 10
  11. Introduction to AngularJS – Day 11
  12. Introduction to AngularJS – Day 12
  13. Introduction to AngularJS – Day 13
  14. Introduction To AngularJS – Day 14
  15. Introduction To AngularJS – Day 15
  16. Introduction To AngularJS – Day 16
  17. Introduction to AngularJS – Day 17
  18. Introduction to AngularJS – Day 18
  19. Introduction to AngularJS – Day 19
  20. Introduction To AngularJS - Day 20
  21. Introduction To AngularJS – Day 21
  22. Introduction to AngularJS – Day 22
Introduction

In this article we are going to learn new feature provided by AngularJS that is ‘ngCookies’. It’s nothing but the separate module in AngularJS. It contains functionality like you can save the browser cookies, get browser cookies and remove cookies. Following are the services and provider provided by AngularJS ‘ngCookies’:

$cookieStore

This $cookieStore provides the functionality like you can store browser cookies in key-value pair like dictionary in C# language. You can read and write from this storage. And it gets the functionality to serialized and deserializes using the AngularJS built-in function toJson and fromJson. Following are methods provided by this $cookieStore as follows:

 

  1. get(key)

    You can access/read browser cookies values using this method by passing the ‘key’ parameter of cookies.

  2. put(key, value)

    Using this method you can set value to cookies using the way key-value pair.

  3. remove(key)

    Using this method you can remove cookies value just by passing the ‘key’ parameter.

$cookies

This service provides the functionality to read and write access to the browser cookies. Following are methods provided by $cookies as follows:

  1. get(key) - Using this method you can get value by passing ‘key’ parameter.

  2. getObject(key) - Using this method you can get deserializes the value by passing ‘key’ parameter to it.

  3. getAll() - Using this you can get all the cookie values.

  4. put(key, value, [optional]) - Using this method you can set the value for a given cookie by passing these three parameters.

  5. putObject(key, value, [optional]) - Using this method you can serialize the value and set to the cookie by passing these parameters.

  6. remove(key, [optional]) - Using this method you can remove the cookie by passing ‘key’ value to it.

Example:

In the following example we going see how to use ‘$cookieStore’ service in AngularJS. For that we need to download and dynamically inject that module as follows:

  1. You can directly use ‘angular-cookies.js’ file CDN path or you can download and include in your application as follows:

    code

    2. Dynamically injecting the ‘ngCookies’ module in your module as follows:

    code
  1. $cookieStore

    In the following example, I have two input box first for ‘key’ and second for ‘value’. By pressing ‘Add to Cookie’ button cookie will be set. For getting cookie value, we are added one more button ‘Get Cookie’. Third button is for removing cookie value ‘Remove Cookie’.

    mainApp.js
    1. /// <reference path="../scripts/angular.min.js" />  
    2. /*Angular Modules take a name, best practice is lowerCamelCase, and a list of dependancies*/  
    3. var app = angular.module('mainApp', ['ngCookies']);  
    4. //Creating controller in general  
    5. app.controller('cookieStoreCtrl', function($scope, $cookieStore, $window)   
    6. {  
    7.     $scope.show_cookie = false;  
    8.     $scope.add_cookie = false;  
    9.     $scope.remove_cookie = false;  
    10.     // Put cookie  
    11.     $scope.addCookie = function()  
    12.     {  
    13.         $cookieStore.put($scope.key, $scope.value);  
    14.         $scope.add_cookie = true;  
    15.     };  
    16.     // Get cookie  
    17.     $scope.getCookie = function()  
    18.     {  
    19.         $scope.show_cookie = true;  
    20.         $scope.myCookie = $cookieStore.get($scope.key);  
    21.         if (angular.isUndefined($scope.myCookie)) {  
    22.             $scope.show_cookie = false;  
    23.             $window.alert('Cookie is not Found! - ' + $scope.myCookie);  
    24.         }  
    25.     };  
    26.     // Removing a cookie  
    27.     $scope.removeCookie = function() {  
    28.         $cookieStore.remove($scope.key);  
    29.         $scope.remove_cookie = true;  
    30.     };  
    31. });  
    CookieStore.html
    1. <!DOCTYPE html>  
    2. <html ng-app="mainApp">  
    3.   
    4. <head>  
    5.     <title>$cookieStore in AngularJS</title>  
    6.     <meta charset="utf-8" />  
    7.     <script src="scripts/angular.min.js"></script>  
    8.     <script src="scripts/angular-cookies.js"></script>  
    9.     <script src="app/mainApp.js"></script>  
    10. </head>  
    11.   
    12. <body ng-controller="cookieStoreCtrl">  
    13.     <h2>$cookieStore in AngularJS</h2>  
    14.     <div>  
    15.         <h3>Add Cookie</h3> Enter the key :   <input type="text" ng-model="key" /><br /><br /> Enter the value :   <input type="text" ng-model="value" /><br /><br /> <input type="button" value="Add to Cookie" ng-click="addCookie()" /><br />  
    16.         <h3 ng-show="add_cookie">Cookies Added!</h3><br /> </div>  
    17.     <div>  
    18.         <h3>Get Added Cookie</h3> <input type="button" value="Get Cookie" ng-click="getCookie()" /><br />  
    19.         <h3 ng-show="show_cookie">Cookies : {{myCookie}}</h3><br /> </div>  
    20.     <div>  
    21.         <h3>Remove Added Cookie</h3> <input type="button" value="Remove Cookie" ng-click="removeCookie()" /><br />  
    22.         <h3 ng-show="remove_cookie">Cookies is removed!</h3><br /> </div>  
    23. </body>  
    24.   
    25. </html>  
    Output:

    Output

    The above screen you can see first time you open the file browser. After entering key and value and pressing ‘Add to Cookie’ button you can see output as follows:

    Output

    Now, click on ‘Get Cookie’ button you can see just added cookie value as follows:

    Output

    Next, click on ‘Remove Cookie’ button, you can see message cookie is removed as follows:

    output

    Now, again press on ‘Get Cookie’ button to check whether cookie is removed or not and you see output as follows:

    output

  2. $cookies

    In the following example, I have two input boxes,  first for ‘key’ and second for ‘value’. By pressing ‘Add to Cookie’ button cookie will be added. For getting cookie value, we are added one more button ‘Get Cookie’ and passing the entered ‘key’ value to that function. Third button is for removing cookie value ‘Remove Cookie’ and passing the ‘key’ value to remove. Last we added one more button here to get all cookies ‘Get All Cookie’.

    mainApp.js
    1. /// <reference path="../scripts/angular.min.js" />  
    2. /*Angular Modules take a name, best practice is lowerCamelCase, and a list of dependancies*/  
    3. var app = angular.module('mainApp', ['ngCookies']);  
    4. //Creating controller in general  
    5. app.controller('cookiesCtrl', function($scope, $cookies, $window)  
    6.  {  
    7.     $scope.show_cookie = false;  
    8.     $scope.removed = false;  
    9.     $scope.add_cookie = false;  
    10.     $scope.getAllCk = false;  
    11.     // Put cookie  
    12.     $scope.addCookie = function()  
    13.     {  
    14.         $cookies.putObject($scope.key, $scope.value);  
    15.         $scope.add_cookie = true;  
    16.     };  
    17.     // Get cookie  
    18.     $scope.getCookie = function() {  
    19.         $scope.show_cookie = true;  
    20.         $scope.myCookie = $cookies.getObject($scope.getkey);  
    21.         if (angular.isUndefined($scope.myCookie)) {  
    22.             $window.alert('Cookie is not Found! - ' + $scope.myCookie);  
    23.         }  
    24.     };  
    25.     // Removing a cookie  
    26.     $scope.removeCookie = function() {  
    27.         $cookies.remove($scope.removekey);  
    28.         $scope.removed = true;  
    29.     };  
    30.     // Removing a cookie  
    31.     $scope.getAllCookie = function() {  
    32.         $scope.getAll = $cookies.getAll($scope.removekey);  
    33.         $scope.getAllCk = true;  
    34.     };  
    35. });  
    Cookies.html
    1. <!DOCTYPE html>  
    2. <html ng-app="mainApp">  
    3. <head>  
    4. <title>$cookies in AngularJS</title>  
    5. <meta charset="utf-8" />  
    6. <script src="scripts/angular.min.js"></script>  
    7. <script src="scripts/angular-cookies.js"></script>  
    8. <script src="app/mainApp.js"></script>  
    9. </head>  
    10. <body ng-controller="cookiesCtrl">  
    11. <h2>$cookies in AngularJS</h2>  
    12.   
    13. <div>  
    14. <h3>Add Cookie</h3>  
    15. Enter the key :   <input type="text" ng-model="key" /><br /><br />  
    16. Enter the value :   <input type="text" ng-model="value" /><br /><br />  
    17. <input type="button" value="Add to Cookie" ng-click="addCookie()" /><br /><br />  
    18. <h3 ng-show="add_cookie">Cookies Added!</h3>  
    19. </div>  
    20.   
    21. <div>  
    22. <h3>Get Cookie</h3>  
    23. Enter the key :   <input type="text" ng-model="getkey" /><br /><br />  
    24. <input type="button" value="Get Cookie" ng-click="getCookie()" /><br /><br />  
    25. <h3 ng-show="show_cookie">Cookies : {{myCookie}}</h3>  
    26. </div>  
    27.   
    28. <div>  
    29. <h3>Remove Cookie</h3>  
    30. Enter the key :   <input type="text" ng-model="removekey" /><br /><br />  
    31. <input type="button" value="Remove Cookie" ng-click="removeCookie()" /><br /><br />  
    32. <h3 ng-show="removed">Cookies Removed : {{removekey}}</h3>  
    33. </div>  
    34.   
    35. <div>  
    36. <h3>Get All Cookie</h3>  
    37. <input type="button" value="Get All Cookie" ng-click="getAllCookie()" /><br />  
    38. <h3 ng-show="getAllCk">All Cookies : {{getAll}}</h3>  
    39. </div>  
    40. </body>  
    41. </html>  
    Output:

    First time you can see output as follows:

    Output

    Now, we are going to add cookies as follows:

    output

    Next, enter just added ‘key’ value in text box and press button ‘Get Cookie’ as follows:

    Output

    Next, enter the same ‘key’ value in text box and click on button ‘Remove Cookie’ as follows:

    output

    For cross checking whether cookie is removed or not just click on button ‘Get Cookie’ as follows:

    Output

    Next, I have added more values in cookies and getting all my cookie values click on button ‘Get All Cookie’. After clicking on button you can see list of cookies values currently present as follows:

    output

    Great, Cookies of AngularJS with example created successfully!

Summary

I hope that beginners as well as students understand concept of Cookies in AngularJS with Example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!