Jquery cookie监视器

Question

在浏览器的整个页面生命周期中监控cookie并在cookie发生变化时触发事件，最好的JS或JQuery方法是什么？

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

Answer 2

知道吗，这对一些奇怪的事情有帮助。我试着在一个移动was应用上使用谷歌翻译(http://translate.google.com/translate_tools?hl=en)，每次语言改变时，它都会作为document.body的第一个孩子在顶部插入一个栏。我现在正在跟踪“googtrans”cookie并执行以下操作

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

Answer 3

有一个用于cookies的jQuery插件。

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

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

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

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

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

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

然而，在回答您的问题时，我并不认为您可以很遗憾地将事件侦听器应用于cookie。