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

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

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

Answer 3

jQuery有一个cookies插件。

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。

Jquery cookie监视器

3 个答案: