CODEWITHSUNDEEP
javascriptangularjscookies
user2943082
user2943082

Reputation: 21

How to detect that cookies are disabled in browser with AngularJS

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?

Upvotes: 2

Views: 5834

Answers (2)

Neaped
Neaped

Reputation: 445

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 :)

Upvotes: 1

Deividi Cavarzan
Deividi Cavarzan

Reputation: 10110

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

Upvotes: 2

Related Questions