AngularJS $cookies Service

The AngularJS $cookies service is used to read, write and delete browser cookies. The cookie feature is available in angular-cookies.min.js file.

Here is a list of AngularJS $cookies methods with description.

Methods	Description
get(key)	This method returns the value of given cookie key. Where key is id of lookup cookie.
getObject(key)	This method returns the deserialized value of given cookie key. Where key is id of lookup cookie.
put(key, value, [options])	This method is used to set a value for given key. Where key is id for value, value is raw value to be store and option is an object.
putObject(key, value, [options])	This method serializes and sets a value for given cookie key. Where key is id for value, value is raw value to be store and option is an object.
getAll()	This method returns a key value object with all the cookies.
remove(key, [options])	This method is used to remove given cookie. Where key is id of cookie value, and option is an object.

Syntax

// Setting a cookie
$cookies.put('yourCookies', 'your first cookie');
// Reading a cookie
var yourCookie = $cookies.get('yourCookies');
// Removing a cookie
$cookies.remove('yourCookies');

AngularJS $cookies Service Example

<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular-cookies.min.js"></script>
    <meta charset="utf-8">
    <title>AngularJS Cookies Example</title>
  <script>
var myApp = angular.module('app', ['ngCookies']);
myApp.controller('CookiesController', ['$scope', '$cookies', 
'$cookieStore', function($scope, $cookies, $cookieStore) {
  $scope.writeCookie = function() {  
    $cookieStore.put('yourCookies', $scope.cookieName);
  }      
  $scope.readCookie = function() {     
    $scope.cookie = $cookieStore.get('yourCookies');      
  }     
  $scope.removeCookie = function() {  
    $cookieStore.remove('yourCookies');   
  }     
}]);
</script>
</head>
<body style="background-color:#DDE4E9;">
  <fieldset style="background-color:#DDE4E9;">            
    <legend>AngulerJS Cookies Example</legend> 
  <div ng-app="app">      
    <div ng-controller="CookiesController">      
        Enter a cookie value:      
        <input type="string" ng-model="cookieName">      
        <button ng-click="writeCookie()">Write Cookie</button></br>   
      Read cookie:    
        <input type="string" ng-model="cookie">      
        <button ng-click="readCookie()">Read Cookie</button> </br>   
      Remove your cookie:  
        <button ng-click="removeCookie()">Remove Cookie</button> </br>       
    </div>      
</div>
 </fieldset> 
</body>
</html>

See Live Example

« Previous