How to detect that cookies are disabled in browser with AngularJS

Question

I am using AngularJS in my current project and I am trying to implement a feature which detects if cookies are disabled in browser. I have tried to use the AngularJS module "ngCookies" to resolve this issue. The main idea of this feature is to create some cookie, and later check if this cookie was created (and it is available) and show message if it wasn't. But it didn't worked.

Controller:

someProject.controller('CookieCtrl', ['$scope', '$cookieStore', function($scope, $cookieStore) {
    $scope.areCookiesEnabled = false;

    $cookieStore.put("TestCookie", "TestCookieText");
    $scope.cookieValue = $cookieStore.get("TestCookie");

    if ($scope.cookieValue) {
        $cookieStore.remove("TestCookie");
        $scope.areCookiesEnabled = true;
    }
}]);

View:

<div class="main" data-ng-controller="CookieCtrl">
    <div class="warning_message" data-ng-show="!areCookiesEnabled">
        <span data-ng-bind="areCookiesEnabled"></span>
    </div>
</div>

Can anybody tell me where is my mistake?

`doesn't work` doesn't tell anyone much. Logic seems fine....set a breakpoint and step through the code to see what it's doing — charlietfl, Oct 31 '13 at 22:18
So guys thanks a lot for all, i use pure JavaScript to resolve this issue. You might to see example here [How to detect server-side whether cookies are disabled](http://stackoverflow.com/questions/531393/how-to-detect-server-side-whether-cookies-are-disabled) — user2943082, Nov 01 '13 at 11:43

Deividi Cavarzan · Answer 1 · 2013-11-01T11:48:26.873

Check:

<div class="warning_message" data-ng-show="!areCookiesEnabled">

data-ng-show="!areCookiesEnabled" is evaluating to false. So, your message will not be shown in case of cookies be present.

I've made a plunker that show this. The controller code is fine, just remove ng-show to see, or change from !areCookiesEnabled to areCookiesEnabled.

[EDIT]

After create the cookie with $cookieStore, call the method $window.cookies();

This method will return all cookies created. Example:

Object {__utmnodejs: "0x0ceb506e0755ba20", __utma: "137862001.1755124536.1363704654.1383162104.1383305355.73", __utmb: "137862001.2.10.1383305355", __utmc: "137862001", __utmz: "137862001.1383305355.73.49.utmcsr=stackoverflow.co…s-are-disabled-in-browser-with-angularjs/19719108"…}

If the cookies are disable, will return an empty obkect:

Object {}

This is happening because $cookieStore cache all created cookie, so, even they are unavaliable, you will see the cached values in the $cookie service.

http://plnkr.co/edit/TiG6Zx5UKrF8BT9lmdId?p=preview

Thanks Deividi, i saw it works. But if i disable cookies in browser, the behavior is the same ( — user2943082, Nov 01 '13 at 08:06
and how about check if the cookie was created using $browser.cookies()? — Deividi Cavarzan, Nov 01 '13 at 11:37

score 1 · Answer 2 · answered Jan 29 '15 at 02:17

Just for reference for someone looking for solution:

It you don't need the further control for cookies, it's not 'have to/must' use ngCookies. In addition, sometimes I will prefer to use native js rather then angular encapsulated function.

You can just use navigator.cookieEnabled to check whether client's cookie support is on or off.

for example:

function cookie () {
        var cookieEnable = navigator.cookieEnabled;

        if (typeof navigator.cookieEnabled === 'undefined' && !cookieEnable) {
            document.cookie = 'cookie-test';
            cookieEnable    = (document.cookie.indexOf('cookie-test') !== -1);
        }

        return cookieEnable;
    }

Then in your controller:

$scope.enabled = cookie();

Now you can easily inject this into any element.

Further more for local-storage support:

var localStorageChecker = function() {
            var item    = 'local-storage-test',
                status  = true;

            try {
                localStorage.setItem(item, item);
                localStorage.removeItem(item);
            } catch(e) {
                status = false;
            }

            return status;
        };

Same as cookie, within your controller:

$scope.localStorageSupport = localStorageChecker();

By the way, you'd better put this function within your service, something like initService, then you can use it once your app initialize or inject into any controller you like.

If you use controllerAs may made the advantage to inject service :)

How to detect that cookies are disabled in browser with AngularJS

2 Answers2

Linked