我能在客户端JavaScript中收到有关cookie更改的通知吗？

Question

我能以某种方式在客户端的JavaScript中跟踪cookie（对于我的域名）的更改吗？例如，是否有一个函数在cookie更改、删除或添加时被调用？

首选顺序如下：

1. 标准的跨浏览器解决方案 2. 跨浏览器解决方案 3. 浏览器特定解决方案 4. 扩展/插件

为什么要这样做？因为我在窗口/标签#1中依赖的cookie可能会在窗口/标签#2中被更改。

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

- pm100

---

Cookie无法启动与其相应网页的通信。这是网页的责任，应该跟踪cookie的内容。 - srijan

Answer 1

一种选择是编写一个定期检查 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

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

- calebds

---

似乎这是我唯一的便携式选择。 - pm100

这似乎很快就会成为一件事情了？https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/cookies/onChanged - Worthy7

@Worthy7 看起来像是浏览器扩展的 API，而不是网站的。 - Alice Purcell

应该是 window.setInterval(checkCookie(), 100); - d7my

@d7my 当实例化时，checkCookie会立即被调用并返回一个函数，因此不需要在setInterval中调用它。 - Benjamin

Answer 2

方法1：定期轮询

轮询 document.cookie

function listenCookieChange(callback, interval = 1000) {
  let lastCookie = document.cookie;
  setInterval(()=> {
    let cookie = document.cookie;
    if (cookie !== lastCookie) {
      try {
        callback({oldValue: lastCookie, newValue: cookie});
      } finally {
        lastCookie = cookie;
      }
    }
  }, interval);
}

使用方法

listenCookieChange(({oldValue, newValue})=> {
  console.log(`Cookie changed from "${oldValue}" to "${newValue}"`);
}, 1000);

document.cookie = 'a=1; Path=/';

方法二：API拦截

拦截document.cookie

(()=> {
  let lastCookie = document.cookie;
  // rename document.cookie to document._cookie, and redefine document.cookie
  const expando = '_cookie';
  let nativeCookieDesc = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie');
  Object.defineProperty(Document.prototype, expando, nativeCookieDesc);
  Object.defineProperty(Document.prototype, 'cookie', {
    enumerable: true,
    configurable: true,
    get() {
      return this[expando];
    },
    set(value) {
      this[expando] = value;
      // check cookie change
      let cookie = this[expando];
      if (cookie !== lastCookie) {
        try {
          // dispatch cookie-change messages to other same-origin tabs/frames
          let detail = {oldValue: lastCookie, newValue: cookie};
          this.dispatchEvent(new CustomEvent('cookiechange', {
            detail: detail
          }));
          channel.postMessage(detail);
        } finally {
          lastCookie = cookie;
        }
      }
    }
  });
  // listen cookie-change messages from other same-origin tabs/frames
  const channel = new BroadcastChannel('cookie-channel');
  channel.onmessage = (e)=> {
    lastCookie = e.data.newValue;
    document.dispatchEvent(new CustomEvent('cookiechange', {
      detail: e.data
    }));
  };
})();

使用方法

document.addEventListener('cookiechange', ({detail: {oldValue, newValue}})=> {
  console.log(`Cookie changed from "${oldValue}" to "${newValue}"`);
});

document.cookie = 'a=1; Path=/';

注意事项

1. 不适用于IE浏览器
2. 在Safari浏览器中需要使用BroadcastChannel polyfill

结论

| Metric \ Method  | Periodic Polling            | API Interception |
| ---------------- | --------------------------- | ---------------- |
| delay            | depends on polling interval | instant          |
| scope            | same-domain                 | same-origin      |

- fuweichin

---

这只对我有效吗？如果是在浏览器控制台中设置cookie，而不是通过set-cookie响应头设置cookie，它是否仍然有效？ - Dashiell Rose Bark-Huss

有一个实验性的 Cookie Store API，它是具备完整功能的。https://wicg.github.io/cookie-store/#example-1ce710fe - fuweichin

很遗憾，Cookie Store API 目前似乎并不完全支持跨浏览器。 - elixon

Answer 3

我们可以使用CookieStore API：

cookieStore.addEventListener('change', ({changed}) => {
    for (const {name, value} of changed) {
        console.log(`${name} was set to ${value}`);
    }
});

- Richie Bendall

---

这是理想的方式——但并非所有浏览器都完全支持——https://caniuse.com/?search=cookie%20store%20api - elixon

它还需要https。 - Nathan

这是一种快速而干净的选项，但不幸的是它不会通知有关删除 cookie 的信息。 - nu_popli

这个答案是未来可持续的 :) - Syscall

Answer 4

我认为我的方法更好。我编写了一个自定义事件来检测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 */
  }
});

- iamousseni

---

感谢您的解决方法！cookieValue: document.cookie 应该初始化为 cookieValue: ""。我在本地测试过了。 - Maxime Helen

Answer 5

如果操作Cookie的代码是您自己编写的，您可以使用 localStorage 来追踪事件的变化。例如，您可以在 localStorage 中存储一些无关紧要的内容来触发其他选项卡上的事件。

例如：

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.

- Moshe L

---

很有趣 - 使用localStorage作为同一“应用程序”中打开的浏览器窗口之间的通信机制。 - pm100

Answer 6

稍作改进（对于每个更改的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);

- wessel

Answer 7

如果您想使用新的CookieStore并希望得到所有浏览器的支持，您可以安装一个（猜测性的）polyfill，如下所示：https://github.com/markcellus/cookie-store。

- Alexander Finkbeiner