Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding cookies in AngularJS

  Author : Shailendra Chauhan
Posted On : 30 Dec 2014
Total Views : 24,383   
Updated On : 30 Dec 2014
 

AngularJS provides ngCookies module for reading and writing browser cookies. To use it include the angular-cookies.js file and set ngCookies as a dependency in your angular app. This module provides two services for cookie management: $cookies and $cookieStore.

$cookies

This service provides read/write access to browser's cookies. If you want to use existing cookie solution, say read/write cookies from your existing server session system then use $cookie.

<script>
var app=angular.module('cookiesExample', ['ngCookies']);

app.controller('ExampleController', ['$cookies', function ($cookies) {
 // Retrieving a cookie
 var favoriteCookie = $cookies.myFavorite;
 // Setting a cookie
 $cookies.myFavorite = 'oatmeal';
}]);
</script>

$cookiesStore

$cookieStore is a thin wrapper around $cookies. It provides a key-value (string-object) storage that is backed by session cookies. The objects which are put or retrieved from this storage are automatically serialized or deserialized by angular to JSON and vice versa.

If you are creating a new solution which will persist cookies based on key/value pairs, use $cookieStore.

<script>
var app=angular.module('cookieStoreExample', ['ngCookies']);

app.controller('ExampleController', ['$cookieStore', function ($cookieStore) {
 // Put cookie
 $cookieStore.put('myFavorite', 'oatmeal');
 // Get cookie
 var favoriteCookie = $cookieStore.get('myFavorite');
 // Removing a cookie
 $cookieStore.remove('myFavorite');
}]);
</script>

What do you think?

I hope you will enjoy the cookies in AngularJS while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS (0)
23 MAY
Xamarin Forms : Build Cross-platform Apps (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

Know More
5 MAY
ASP.NET MVC with Angular4 Development (Online)

06:30 AM-08:30 AM IST(+5.30 GMT)

Know More
29 APR
Xamarin Forms : Build Cross-platform Apps (Classroom)

5:00 PM-6:30 PM

Know More
29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

Know More
27 APR
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

Know More
22 APR
NodeJS Development (Classroom)

11:00 AM-12:30 PM

10 APR
Master Class ASP.NET MVC 5 with Angular2 Plus Angular4 Development (Online)

09:00 PM - 11:00 PM IST (M/W/F)

8 APR
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM

25 MAR
Xamarin Forms : Build Cross-platform Apps (Classroom)

8:00 AM-9:30AM

21 MAR
ASP.NET MVC with Angular2 Development (Online)

09:00 PM - 11:00 PM IST( TUS, THR, SAT)

25 FEB
ASP.NET MVC with Angular2 Development (Classroom)

03:30 PM-05:30 PM

24 FEB
Angular 2 with Type Script (Online)

09:00 PM-11:00 PM IST(Mon,Wed,Fri)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+