can i be notified of cookie changes in client side javascript

Question

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

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.

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

Cookie cannot initiate communication to their respective webpage. It is the webpage's responsibility which should keep track of cookie's content. — srijan, Jan 15 '13 at 18:31

calebds · Answer 1 · 2013-01-15T18:59:14.083

33

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

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

edited Jan 15 '13 at 18:59

answered Jan 15 '13 at 18:47

calebds

25,670
9
46
74

seems like its my only portable option – pm100 Jan 15 '13 at 23:11
It seems like this might be a thing soon? https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies/onChanged – Worthy7 Apr 10 '19 at 01:20
2

@Worthy7 That looks like API for browser extensions, not websites – Alice Purcell Jun 17 '19 at 16:34
shouldn't it be window.setInterval(checkCookie(), 100); – d7my Mar 17 '21 at 15:27
3

@d7my `checkCookie` is immediately invoked when instantiated and returns a fn, so no, you don't need to invoke it in the `setInterval` – Benjamin Apr 01 '21 at 13:24

fuweichin · Accepted Answer · 2023-08-08T14:51:01.927

Method 1: Periodic Polling

Poll 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);
}

Usage

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

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

Method 2: API Interception

Intercept 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
    }));
  };
})();

Usage

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

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

Notes

not for IE
require BroadcastChannel polyfill for Safari

Conclusion

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

Does this only works for me if is set the cookies in the browser console but not if the cookie is set by a set-cookie response header — Dashiell Rose Bark-Huss, Dec 27 '20 at 00:10
There is experimental Cookie Store API which is full-featured, https://wicg.github.io/cookie-store/#example-1ce710fe — fuweichin, Jan 13 '21 at 10:11
Unfortunately for now Cookie Store API does not seem to be fully cross-browser. — elixon, Jan 07 '22 at 17:22

Richie Bendall · Answer 3 · 2021-11-07T12:58:44.823

16

We can use the CookieStore API:

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

edited Nov 07 '21 at 12:58

answered Nov 19 '20 at 06:31

Richie Bendall

7,738
4
38
58

9

That is the ideal way - but not fully supported by all browsers - https://caniuse.com/?search=cookie%20store%20api – elixon Jan 07 '22 at 17:23
It also requires https – Turnip Feb 09 '22 at 03:30
1

This is a quick and clean option but unfortunately doesn't notify about cookies being deleted. – nu_popli Sep 15 '22 at 16:15
This answer is futurproof :) – Syscall Feb 13 '23 at 22:40

score 8 · Answer 4 · answered Aug 08 '19 at 20:26

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

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 */
  }
});

Thanks for the workaround! `cookieValue: document.cookie` should be initialized to `cookieValue: ""`. I tested locally — Maxime Helen, Aug 19 '20 at 05:18

score 7 · Answer 5 · answered May 27 '18 at 08:22

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

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.

this is very interesting - using localStorage as a communication mechanism between browser windows open to the same 'app' — pm100, May 31 '18 at 21:34

score 1 · Answer 6 · answered Aug 21 '15 at 12:33

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

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);

score 1 · Answer 7 · answered Dec 08 '21 at 08:18

1

If you want to use the new CookieStore and want the support of all browsers, you can install a (speculative) polyfill like the following: https://github.com/markcellus/cookie-store

answered Dec 08 '21 at 08:18

Alexander Finkbeiner

11
1

can i be notified of cookie changes in client side javascript

7 Answers7

Conclusion

Linked

Related