Accessing Cookies using a Custom Service

Steps to configure the AngularJS Application

Accessing Cookies using JavaScript’s document.cookie

In this approach, we are accessing the cookie in AngularJS using the Custom Service. We have specified simple UI components to set the new cookie value, and also update and access the cookie values. The ‘CookieService‘ service mainly handles the cookie functions. When the ‘Set Cookie‘ button is clicked, it updates the cookie value in the client browser, and by using the ‘Access Cookie‘ button, the cookie value is been retrieved and displayed to the user in terms of an alert message.

Example: Below is an example that showcases how to access cookies in AngularJS using Custom Service.

HTML

<!DOCTYPE html> 
<html ng-app="cookieApp"> 
  
<head> 
    <title>Cookie Access</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"> 
      </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/angular-cookies/1.8.3/angular-cookies.min.js"> 
      </script> 
    <style> 
        h1 { 
            color: green; 
            text-align: center; 
        } 
  
        .container { 
            background-color: #f5f5f5; 
            border-radius: 5px; 
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
            margin: 20px auto; 
            max-width: 400px; 
            padding: 20px; 
        } 
  
        label { 
            display: block; 
            font-weight: bold; 
            margin-bottom: 5px; 
        } 
  
        input[type="text"] { 
            width: 100%; 
            padding: 8px; 
            margin-bottom: 15px; 
            border: 1px solid #ccc; 
            border-radius: 3px; 
        } 
  
        .button-container { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        } 
  
        button { 
            background-color: #4CAF50; 
            border: none; 
            color: white; 
            padding: 10px 20px; 
            cursor: pointer; 
            border-radius: 3px; 
            width: 100%; 
            margin-bottom: 10px; 
        } 
  
        button:hover { 
            background-color: #45a049; 
        } 
  
        .cookie-value { 
            font-weight: bold; 
            text-align: center; 
            margin-top: 15px; 
            font-size: 18px; 
        } 
    </style> 
</head> 
  
<body ng-controller="CookieController"> 
    <h1>w3wiki</h1> 
    <div class="container"> 
        <h3>Approach 1: Using a Custom Service</h3> 
        <label for="newCookie">Enter Cookie Value:</label> 
        <input type="text" 
               id="newCookie" 
               ng-model="newCookie" 
               placeholder="Cookie Value"> 
        <div class="button-container"> 
            <button ng-click="setCookie()"> 
                  Set Cookie 
              </button> 
            <button ng-click="showCookie()"> 
                  Access Cookie 
              </button> 
        </div> 
        <div class="cookie-value"> 
              Current Cookie Value: {{ cookieValue }} 
          </div> 
    </div> 
  
    <script> 
        angular.module('cookieApp', ['ngCookies']) 
            .service('CookieService', ['$cookies', function ($cookies) { 
                this.getCookieValue = function () { 
                    return $cookies.get('cookieValue') || 'Default Cookie'; 
                }; 
  
                this.setCookieValue = function (newCookie) { 
                    $cookies.put('cookieValue', newCookie); 
                }; 
            }]) 
            .controller('CookieController', ['$scope', 'CookieService', 
                function ($scope, CookieService) { 
                    $scope.cookieValue = CookieService.getCookieValue(); 
  
                    $scope.setCookie = function () { 
                        if ($scope.newCookie) { 
                            CookieService.setCookieValue($scope.newCookie); 
                            $scope.cookieValue = $scope.newCookie; 
                            $scope.newCookie = ''; 
                        } 
                    }; 
                    $scope.showCookie = function () { 
                        alert('Cookie Value: ' + $scope.cookieValue); 
                    }; 
                }]); 
    </script> 
</body> 
  
</html>

Output:

How to access cookies in AngularJS?

AngularJS is the most useful framework for developing dynamic web applications. While developing the applications, we need to store and access the cookies for many other functionalities like retiring the user details, etc. Cookies are nothing but the data that is usually stored in the client’s browser. These cookies can also be used for maintaining the user’s sessions, tracking the user preferences, and also for other functional work. In this article, we will see how we can access the cookies in AngularJS with different approaches. We will see the practical implementation along with the example.

Tags:

#AngularJS-Questions #Geeks Premier League 2023 #AngularJS #Geeks Premier League #Web Technologies