How to set, get and clear cookies in AngularJS ?
Last Updated :
02 Aug, 2024
In this article, we will see how to set, get & clear the Cookies in AngularJS, along with understanding the basic usage through the implementation. In AngularJS, we need to use angular-cookies.js to set, get and clear the cookies. You can use the live CDN link for this: https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.js
We need to include $cookies in your controller and it has to Get, Set, and Clear method to get, set and clear cookies respectively. Angular has inbuilt directives named as ngCookies.
Writing Cookies: The WriteCookie function of the controller gets called When the Write Cookie Button is clicked. The WriteCookie function saves the input box value as cookies, using the $cookieStore service of the ngCookies module. The $cookieStore put function has two parameters:
Syntax:
$scope.SetCookies = function () {
$cookies.put("username", $scope.username);
};Reading Cookies: The ReadCookie function of the controller gets called when the Read Cookie Button is clicked. The ReadCookie function fetches the value of the Cookie using the $cookieStore service of the ngCookies module. The $cookieStore get function has one parameter:
Syntax:
$scope.GetCookies = function () {
$window.alert($cookies.get('username'));
};Removing Cookies: The RemoveCookie function of the controller gets called when the Remove Cookie Button is clicked. The RemoveCookie function removes the Cookie using the $cookieStore service of the ngCookies module. The $cookieStore remove function has one parameter:
Syntax:
$scope.ClearCookies = function () {
$cookies.remove('username');
};Example: This example illustrates to set, get & clear cookies in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
A Simple example of Get, Set
and Clear Cookie in AngularJS
</title>
<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>
</head>
<body style="text-align: center">
<h1 style="color: green">GeeksforGeeks</h1>
<h2>set, get and clear cookies in AngularJs</h2>
<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>
Output:
Similar Reads
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 brows
5 min read
How to Clear Cookies on Android? Cookies are small files that your browser stores for the purpose of recording certain interactions within the web or personalizing your navigation experience. Although some cookies remain useful for saving logins or website preferences, others may bog down your device or become an invasion of your p
5 min read
How to Clear Cache and Cookies on iPhone Delete Cache on iPhoneOpen Settings > Select GeneralTap iPhone Storage > Select SafariTap Website DataSelect Remove All Website DataConfirm Delete In the dynamic world of smartphones, our iPhones have become more than just communication tools – they're integral to our daily tasks and memories.
4 min read
How to cancel an $http request in AngularJS ? In AngularJS, we use different sources to fetch the data as per our needs. We call different data source APIs using $http requests. We can fetch the data along with cancelling the real-time running request. In AngularJS, we can use the $q service along with the promises to cancel the request. Also,
4 min read
How to set checkbox checked on button click in AngularJS? In this article, we will see how to set checkboxes checked with the click of a button in AngularJS. Approach: The approach is to use the ng-checked directive to check the checkbox in the DOM. In the first example, a single checkbox is checked by the button and In the second example, multiple checkbo
2 min read