如何使用 AngularJS 检测浏览器中的 cookie 是否被禁用答案

【问题标题】：How to detect that cookies are disabled in browser with AngularJS如何使用 AngularJS 检测浏览器中的 cookie 是否被禁用
【发布时间】：2013-11-12 02:09:34
【问题描述】：

我在我当前的项目中使用 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>

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

【问题讨论】：

你得到了什么结果？你总是把饼干拿回来吗？
doesn't work 并没有告诉任何人太多。逻辑似乎很好......设置断点并单步执行代码以查看它在做什么
没错，我总是把 cookie 拿回来。我的浏览器是FF24。
非常感谢大家，我使用纯 JavaScript 来解决这个问题。您可能会在这里看到示例How to detect server-side whether cookies are disabled
不错，我还使用 angularjs 可能的解决方案进行编辑... =)

标签： javascript angularjs cookies

【解决方案1】：

检查：

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

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

我已经制作了一个显示这一点的 plunker。控制器代码没问题，去掉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 被禁用，将返回一个空对象：

Object {}

这是因为$cookieStore缓存了所有创建的cookie，所以即使它们不可用，您也会在$cookie服务中看到缓存的值。

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

【讨论】：

感谢 Deividi，我看到它有效。但是如果我在浏览器中禁用 cookie，行为是一样的（
如何检查 cookie 是否是使用 $browser.cookies() 创建的？

【解决方案2】：

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

如果您不需要进一步控制 cookie，则不是“必须/必须”使用 ngCookies。另外，有时候我会更喜欢使用原生js而不是angular封装的函数。

您可以只使用 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，然后你可以在你的应用初始化或注入任何你喜欢的控制器时使用它。

如果你使用 controllerAs 可能有利于注入服务:)

【讨论】：