jQuery cookie 监视器答案

【问题标题】：Jquery cookie monitorjQuery cookie 监视器
【发布时间】：2011-05-06 08:03:31
【问题描述】：

在浏览器的整个页面生命周期内监控 cookie 并在 cookie 更改时触发事件的最佳 JS 或 JQuery 特定方法是什么？

【问题讨论】：

【解决方案1】：

据我所知，无法将change（或类似的）事件直接绑定到 cookie。相反，我会采用这种方法：

创建一个轮询器，每 X 毫秒将 cookie 值与先前已知的值进行比较。

// basic functions from the excellent http://www.quirksmode.org/js/cookies.html
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

/////////////////////////////////
// ACTUAL FUN STUFF BELOW
/////////////////////////////////

var cookieRegistry = [];

function listenCookieChange(cookieName, callback) {
    setInterval(function() {
        if (cookieRegistry[cookieName]) {
            if (readCookie(cookieName) != cookieRegistry[cookieName]) { 
                // update registry so we dont get triggered again
                cookieRegistry[cookieName] = readCookie(cookieName); 
                return callback();
            } 
        } else {
            cookieRegistry[cookieName] = readCookie(cookieName);
        }
    }, 100);
}

然后使用将是这样的：

listenCookieChange('foo', function() {
    alert('cookie foo has changed!');
});

注意：这还没有经过测试，只是我如何解决问题的快速演示。

编辑：我现在已经对此进行了测试并且可以正常工作。 See example :)

【讨论】：

注意：这仅在 cookie 更改事件时触发。我还需要检查 cookie 创建，因此修改了如下代码：... if (cookieRegistry[cookieName] || readCookie(cookieName) != null) { ...
嗨，Aron，谢谢你的罚款！真的感谢。现在是 2017 年，我面临一个关于 consistent-return 的 eslint 规则问题，因为 listenCookieChange() 是 setInterval。你能更新你的答案让 eslint 开心吗？禁用 eslint 有效。

【解决方案2】：

知道吗，这有助于一些奇怪的事情。我试图在移动网络应用程序上使用谷歌翻译（http://translate.google.com/translate_tools?hl=en），每次更改语言时，它都会在顶部插入一个栏作为文档的第一个子项。身体。我现在正在跟踪“googtrans”cookie 并执行此操作

listenCookieChange('googtrans', function() {
    $(document.body).css('top','0px');
});

【讨论】：

【解决方案3】：

cookies 有一个 jQuery 插件。

http://plugins.jquery.com/project/Cookie

在 html 文档中访问 cookie 并不难，它们位于document.cookie。

<!-- Add cookie -->
$.cookie('cookieName':'cookieValue');

<!-- get cookie -->
$.cookie('cookieName');

<!-- removecookie -->
$.cookie('cookieName', null);

另外还有用于添加 cookie 的选项参数，例如到期。

但是，在回答您的问题时，不幸的是，我实际上并不认为您可以将事件侦听器应用于 cookie。

【讨论】：

您的代码语法错误。您在 javascript 中使用 html cmets，第一个示例中 'cookieName' 和 'cookieValue' 之间的冒号必须是逗号。这可能是投反对票的原因。