Home/ Questions/Q 8056987
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T08:53:05+00:00

What’s the AngularJS way to access cookies? I’ve seen references to both a service

  • 0

What’s the AngularJS way to access cookies? I’ve seen references to both a service and a module for cookies, but no examples.

Is there, or is there not an AngularJS canonical approach?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This answer has been updated to reflect latest stable angularjs version. One important note is that $cookieStore is a thin wrapper surrounding $cookies. They are pretty much the same in that they only work with session cookies. Although, this answers the original question, there are other solutions you may wish to consider such as using localstorage, or jquery.cookie plugin (which would give you more fine-grained control and do serverside cookies. Of course doing so in angularjs means you probably would want to wrap them in a service and use $scope.apply to notify angular of changes to models (in some cases).

    One other note and that is that there is a slight difference between the two when pulling data out depending on if you used $cookie to store value or $cookieStore. Of course, you’d really want to use one or the other.

    In addition to adding reference to the js file you need to inject ngCookies into your app definition such as: 

    angular.module('myApp', ['ngCookies']);

    you should then be good to go.

    Here is a functional minimal example, where I show that cookieStore is a thin wrapper around cookies:

    <!DOCTYPE html>
<html ng-app="myApp">
<head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="MyController">

  <h3>Cookies</h3>
  <pre>{{usingCookies|json}}</pre>
  <h3>Cookie Store</h3>
  <pre>{{usingCookieStore|json}}</pre>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
  <script>
    angular.module('myApp', ['ngCookies']);
    app.controller('MyController',['$scope','$cookies','$cookieStore', 
                       function($scope,$cookies,$cookieStore) {
      var someSessionObj = { 'innerObj' : 'somesessioncookievalue'};

    $cookies.dotobject = someSessionObj;
    $scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') };

    $cookieStore.put('obj', someSessionObj);
    $scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, };
    }
  </script>

</body>
</html>

    The steps are:

    1. include angular.js
    2. include angular-cookies.js
    3. inject ngCookies into your app module (and make sure you reference that module in the ng-app attribute)
    4. add a $cookies or $cookieStore parameter to the controller
    5. access the cookie as a member variable using the dot (.) operator
      — OR —
    6. access cookieStore using put/get methods
    • 0