我可以在客户端 javascript 中收到 cookie 更改的通知吗

can i be notified of cookie changes in client side javascript

提问by pm100

Can I somehow follow changes to cookies (for my domain) in my client side javascript. For example a function that gets called if a cookie gets changed , deleted or added

我可以在我的客户端 javascript 中以某种方式跟踪 cookie（对于我的域）的更改吗？例如，如果 cookie 被更改、删除或添加，则调用该函数

In order of preference

按优先顺序

• standard cross browser
• cross browser
• browser specific
• extension / plugin

• 标准跨浏览器
• 跨浏览器
• 浏览器特定
• 扩展/插件

Why? because cookies I depend on in window / tab #1 can get changed in window / tab #2.

为什么？因为我在窗口/选项卡 #1 中依赖的 cookie 可以在窗口/选项卡 #2 中更改。

I found out that chrome allows extensions to be notified of cookies changes. But thats my least favorite option

我发现 chrome 允许扩展程序收到 cookie 更改的通知。但那是我最不喜欢的选择

采纳答案by paislee

One option is to write a function that periodically checks the cookie for changes:

一种选择是编写一个函数来定期检查 cookie 的变化：

var checkCookie = function() {

    var lastCookie = document.cookie; // 'static' memory between function calls

    return function() {

        var currentCookie = document.cookie;

        if (currentCookie != lastCookie) {

            // something useful like parse cookie, run a callback fn, etc.

            lastCookie = currentCookie; // store latest cookie

        }
    };
}();

window.setInterval(checkCookie, 100); // run every 100 ms

• This example uses a closure for persistent memory. The outer function is executed immediately, returning the inner function, and creating a private scope.
• window.setInterval

• 此示例对持久内存使用闭包。外部函数立即执行，返回内部函数，并创建一个私有作用域。
• window.setInterval

回答by Moshe L

If the code that manipulated the cookies is yours, you can use localStoragefor tracking changed with events. for example, you can store a junk on the localStorage to trigger an event on the other tabs.

如果操作 cookie 的代码是您的，您可以 localStorage用于跟踪随事件变化的变化。例如，您可以在 localStorage 上存储垃圾以触发其他选项卡上的事件。

for example

例如

var checkCookie = function() {

var lastCookies = document.cookie.split( ';' ).map( function( x ) { return x.trim().split( /(=)/ ); } ).reduce( function( a, b ) { 
        a[ b[ 0 ] ] = a[ b[ 0 ] ] ? a[ b[ 0 ] ] + ', ' + b.slice( 2 ).join( '' ) :  
        b.slice( 2 ).join( '' ); return a; }, {} );


return function() {

    var currentCookies =  document.cookie.split( ';' ).map( function( x ) { return x.trim().split( /(=)/ ); } ).reduce( function( a, b ) { 
        a[ b[ 0 ] ] = a[ b[ 0 ] ] ? a[ b[ 0 ] ] + ', ' + b.slice( 2 ).join( '' ) :  
        b.slice( 2 ).join( '' ); return a; }, {} );


    for(cookie in currentCookies) {
        if  ( currentCookies[cookie] != lastCookies[cookie] ) {
            console.log("--------")
            console.log(cookie+"="+lastCookies[cookie])
            console.log(cookie+"="+currentCookies[cookie])
        }

    }
    lastCookies = currentCookies;

};
}();
 $(window).on("storage",checkCookie); // via jQuery. can be used also with VanillaJS


// on the function changed the cookies

document.cookie = ....
window.localStorage["1"] = new Date().getTime(); // this will trigger the "storage" event in the other tabs.

回答by iamousseni

I think my way is better. I wrote a custom event for detect when cookie is chanced:

我觉得我的方法更好。我编写了一个自定义事件来检测何时出现 cookie：

const cookieEvent = new CustomEvent("cookieChanged", {
  bubbles: true,
  detail: {
    cookieValue: document.cookie,
    checkChange: () => {
      if (cookieEvent.detail.cookieValue != document.cookie) {
        cookieEvent.detail.cookieValue = document.cookie;
        return 1;
      } else {
        return 0;
      }
    },
    listenCheckChange: () => {
      setInterval(function () {
        if (cookieEvent.detail.checkChange() == 1) {
          cookieEvent.detail.changed = true;
          //fire the event
          cookieEvent.target.dispatchEvent(cookieEvent);
        } else {
          cookieEvent.detail.changed = false;
        }
      }, 1000);
    },
    changed: false
  }
});

/*FIRE cookieEvent EVENT WHEN THE PAGE IS LOADED TO
 CHECK IF USER CHANGED THE COOKIE VALUE */

document.addEventListener("DOMContentLoaded", function (e) {
  e.target.dispatchEvent(cookieEvent);
});

document.addEventListener("cookieChanged", function (e) {
  e.detail.listenCheckChange();
  if(e.detail.changed === true ){
    /*YOUR CODE HERE FOR DO SOMETHING 
      WHEN USER CHANGED THE COOKIE VALUE */
  }
});

回答by wessel

Slightly improved (shows a console.log for each changed cookie):

稍微改进（为每个更改的 cookie 显示一个 console.log）：

var checkCookie = function() {

var lastCookies = document.cookie.split( ';' ).map( function( x ) { return x.trim().split( /(=)/ ); } ).reduce( function( a, b ) { 
        a[ b[ 0 ] ] = a[ b[ 0 ] ] ? a[ b[ 0 ] ] + ', ' + b.slice( 2 ).join( '' ) :  
        b.slice( 2 ).join( '' ); return a; }, {} );


return function() {

    var currentCookies =  document.cookie.split( ';' ).map( function( x ) { return x.trim().split( /(=)/ ); } ).reduce( function( a, b ) { 
        a[ b[ 0 ] ] = a[ b[ 0 ] ] ? a[ b[ 0 ] ] + ', ' + b.slice( 2 ).join( '' ) :  
        b.slice( 2 ).join( '' ); return a; }, {} );


    for(cookie in currentCookies) {
        if  ( currentCookies[cookie] != lastCookies[cookie] ) {
            console.log("--------")
            console.log(cookie+"="+lastCookies[cookie])
            console.log(cookie+"="+currentCookies[cookie])
        }

    }
    lastCookies = currentCookies;

};
}();

window.setInterval(checkCookie, 100);