$cookieStore VS localStorage VS sessionStorage

http://blog.rgarom.com/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.
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");

 

localStorage and sessionStorage are both so-called WebStorages and features of HTML5.

localStorage stores information as long as the user does not delete them.

sessionStorage stores information as long as the session goes. Usually until the user closes the tab/browser.

cookies are simply cookies, which are supported by older browsers and usually are a fallback for frameworks that use the above mentioned WebStorages.

In contrast cookies can store way less information then WebStorages and the information in WebStorages is never transferred to the server.

Keep in mind that the EU has a regulation that requires websites to inform their users about the usage of cookies. I dont know whether this also applies to WebStorages

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s