Accessing Cookies using JavaScript’s document.cookie
In this approach, for accessing the cookie in AngularJS, we are using the JavaScript’s document.cookie method. When the ‘Set Cooie’ button is clicked, it creates a sample cookie with the value “Hello Geek!” which has an expiry of 1 hour. After clicking on the “Get Cookie” button. the value is been displayed to the user. Here, the ‘cookieConteoller’ is used to overall handle the logic of setting and getting the cookie value. Using the ‘document.cookie’ property, we are retrieving and displaying the cookie value to the user.
Example: Below is an example that showcases how to access cookies in AngularJS using a document.cookie
HTML
<!DOCTYPE html> < html ng-app = "cookieApp" > < head > < meta charset = "UTF-8" > < title > AngularJS Cookies Example - Approach 2 </ title > < style > body { font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 0; } .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } h1 { color: green; } h3 { color: #333; } button { background-color: #FF5722; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } button:hover { background-color: #FF7043; } p { font-size: 18px; margin-top: 10px; } </ style > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js" > </ script > </ head > < body ng-controller = "cookieController" style = "text-align: center;" > < div class = "container" > < h1 >w3wiki</ h1 > < h3 > Approach 2: Using JavaScript's document.cookie </ h3 > < button ng-click = "setCookie()" > Set Cookie </ button > < button ng-click = "getCookie()" > Get Cookie </ button > < p >Cookie Value: {{ cookieValue }}</ p > </ div > < script > var app = angular.module('cookieApp', []); app.controller('cookieController', function ($scope) { $scope.cookieValue = ''; $scope.setCookie = function () { var cookieName = 'exampleCookie'; var cookieValue = 'Hello, Geek!'; var expirationDate = new Date(); expirationDate.setHours(expirationDate.getHours() + 1); document.cookie = cookieName + '=' + cookieValue + ';expires=' + expirationDate.toUTCString(); }; $scope.getCookie = function () { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length ; i++) { var cookie = cookies [i].trim(); if (cookie.startsWith('exampleCookie=')) { $ scope.cookieValue = cookie.substring('exampleCookie='.length, cookie.length); break; } } }; }); </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.