AngularJS $cookies.get() always returns undefined

Question

I'm using AngularJS 1.4.0 and the $cookies service. The following code will always print out an empty object:

(function() {
    var app = angular.module("user-cookies-service", []);

    app.service('UserCookiesService', ["$cookies", function($cookies) {
        $cookies.put("Hello", "World");
        console.log($cookies.getAll());
    }]);
})();

I've tried:

• Using AngulerJS 1.3.15 and $cookieStore where cookies don't persist when the browser is refreshed (but it at least created the cookies).
• Adding an expiry date.
• Making sure Cookies are enabled in my browser (Chrome).
• Trying plain old JS, which still doesn't work.

I haven't been able to find a similar issue anywhere.

Thank you.

Answer 1

A little late but for anyone having the same issue. I had a similar problem. You have to make sure you are passing the correct options as the third parameter. In my case the path was not being set. Angular uses your <base> tag to set the path. If that is not available for whatever reason, it will not set the cookie.

try this

$cookies.put('secret', 'I cant tell you' {
   expires: new Date(date),
   path: '/'
});

Answer 2

For anyone who stumbles upon this problem...

By default, Chrome doesn't allow cookies for local files. You have to run it with the --enable-file-cookies flag.

Make sure Chrome is closed and open the Windows Command Prompt/Terminal and run the following command:

<path-to-chrome>/chrome.exe --enable-file-cookies

This will allow you to put/get cookies locally.

Cheers!

Answer 3

maybe cookies should be available after refresh, try to log it in opposite way

console.log($cookies.getAll());
$cookies.put("Hello", "World");

first load: {}, second load: {"Hello": "World"}

in angular 1.3, use $cookies.Hello = "world"; to set cookie