AngularJS includes a service component inside ngCookies directive to storage objects in a key-value format called cookieStore. This storage differs from HTML5 APIs localStorage and sessionStorage.
The key points of each one are detailed below.
$cookieStore:
  • Session scoped.
  • Not persistant, expires
  • Automatic serialization or deserialization toJson/fromJson.
  • Values are included in every server request.
  • As any cookie, its size must be less than 4KB.
Example:
angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
  // Put cookie
  $cookieStore.put('myFavorite','oatmeal');
  // Get cookie
  var favoriteCookie = $cookieStore.get('myFavorite');
  // Removing a cookie
  $cookieStore.remove('myFavorite');
}]);
localStorage:
  • Domain scoped. Same data can be accessed and stored in a domain and can be shared between to tabs.
  • Persists when browser is closed. No expiration date.
  • Data stored locally without affecting website performance, more secure.
  • Data never transferred to the server.
  • Storage limit is larger (at least 5MB).
Example:
// Store
localStorage.setItem("name", "Jon");
// Retrieve
localStorage.getItem("name");
sessionStorage:
  • Session scoped
  • Data is lost when tab is closed
  • Data never transferred to the server.
  • Storage limit is larger (at least 5MB).
// Store
sessionStorage.setItem("name", "Jon");
// Retrieve
sessionStorage.getItem("name");

Service components in ngCookies








NameDescription


$cookieStore

Provides a key-value (string-object) storage, that is backed by session cookies. Objects put or retrieved from this storage are automatically serialized or deserialized by angular's toJson/fromJson.




$cookies

Provides read/write access to browser's cookies.