$cookieStore VS localStorage VS sessionStorage

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.
$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 of $cookieStore

// Put cookie
  $cookieStore.put('cookieName','my-data');
  // Get cookie
  var favoriteCookie = $cookieStore.get('cookieName');
  // Removing a cookie
  $cookieStore.remove('cookieName');

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", "John");
 // 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", "John");
 // Retrieve
 sessionStorage.getItem("name");