Question

我在当前项目中使用AngularJS，我正在尝试实现一项功能，该功能可以检测浏览器中是否禁用了cookie。我曾尝试使用AngularJS模块“ngCookies”来解决此问题。这个功能的主要思想是创建一些cookie，然后检查这个cookie是否已创建（并且它是否可用）并显示消息（如果不是）。但它没有奏效。

控制器：

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;
    }
}]);

查看：

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

有谁能告诉我我的错误在哪里？

Answer 1

检查：

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

data-ng-show="!areCookiesEnabled"正在评估false。因此，如果存在cookie，您的消息将不会显示。

我做了一个能说明这一点的傻瓜。控制器代码很好，只需删除ng-show即可查看，或从!areCookiesEnabled更改为areCookiesEnabled。

<强> [编辑]

使用$ cookieStore创建cookie后，调用方法$ window.cookies（）;

此方法将返回创建的所有Cookie。示例：

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"…}

如果cookie被禁用，将返回一个空的obkect：

Object {}

这种情况正在发生，因为$cookieStore缓存了所有已创建的Cookie，因此，即使它们不可用，您也会在$cookie服务中看到缓存的值。

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

Answer 2

仅供寻找解决方案的人参考：

你不需要进一步控制cookie，它不是必须/必须＆＃39;使用ngCookies。另外，有时候我更喜欢使用原生js而不是角度封装函数。

您可以使用navigator.cookieEnabled检查客户端的cookie支持是否开启。

例如：

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;
    }

然后在你的控制器中：

$scope.enabled = cookie();

现在您可以轻松地将其注入任何元素。

更多本地存储支持：

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

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

            return status;
        };

与控制器内的cookie相同：

$scope.localStorageSupport = localStorageChecker();

顺便说一句，您最好将此功能放在您的服务中，例如initService，然后您可以在应用初始化或注入任何您喜欢的控制器后使用它。

如果使用控制器，则可能有利于注入服务：）

如何检测使用AngularJS在浏览器中禁用cookie

2 个答案: