How to use Cookies in AngularJS

Using cookies in AngularJS is pretty simple. We can store the information in AngularJS cookies and we can retrieve it whenever required.

Things to remember when using AngularJS cookies are,

  1. We need to include angular-cookies.js file from external source or internally
  2. We need to inject ngCookies module in app definition
  3. We need to use $cookies as the parameter for controller function (Note: The $cookieStore service is deprecated. Please use the $cookies service instead.)
  4. We have to use put and get methods to use cookies
  5. We need to specify folder path when storing and removing cookies.

Now, we are going to see an example.

<html>
<head>
      <title>Angular JS Cookie Implementation</title>	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-cookies.js"></script>
</head>
<body ng-app="cookieApp">
	<div ng-controller="cookieController">
	<p>{{ msg }}</p>
	<input type="text" ng-model="mycookie" /> &nbsp; <input type="submit" ng-click="add_user_cookie()" value="Add to Cookie"/>
	<p>Cookie value : {{ cookie_val }}</p>
	<p ng-click="remove()" style="cursor:pointer;color:blue;" ng-show="isCookieSet"><u>Remove Cookie</u></p>
	</div>	
	<script>
		var app = angular.module("cookieApp",['ngCookies']);
		app.controller("cookieController",function($scope,$cookies){
		$scope.mycookie = "India";
		$scope.add_user_cookie = function(){
		if($scope.mycookie != ""){
			$scope.msg = "";
			$cookies.put('myFavorite', $scope.mycookie,{path:'/'});
			$scope.cookie_val  = $cookies.get('myFavorite');
			$scope.mycookie = ""; $scope.isCookieSet = true;
		}
		else{
			$scope.msg = "Enter some text..";
		}
		};
		$scope.remove = function(){
			$cookies.remove("myFavorite",{path:'/'});
			$scope.cookie_val  = $cookies.get('myFavorite');
			$scope.msg = "Cookie removed..";
			$scope.isCookieSet = false;
		};
		});
	</script>
</body>
</html>

var app = angular.module("cookieApp",['ngCookies']);

We are injecting ‘ngCookies’ modules to the app

app.controller("cookieController",function($scope,$cookies){

We are passing $cookies as parameter to the controller function

$cookies.put('myFavorite', $scope.mycookie,{path:'/'});

This method adds data to the cookie named “myFavorite” at the specified path.

$scope.cookie_val  = $cookies.get('myFavorite');

This method gets the cookie value and assign it to the cookie_val variable

$cookies.remove("myFavorite",{path:'/'});

This method removes the cookie value.

Thanks for reading.

Feedback are welcome. Please feel free to ask questions.

Don’t forget to subscribe to Geeks.Gallery, to get free emails to your inbox.

Subscribe to Geeks.Gallery

Nagarajan
Follow me

Nagarajan

Web Developer at Energy Alternatives India
I'm interested in developing Web applications andkeen on learning new technologies.

View Nagarajan's Profile
Nagarajan
Follow me

Latest posts by Nagarajan (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *