方法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;
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;
let cookie = this[expando];
if (cookie !== lastCookie) {
try {
let detail = {oldValue: lastCookie, newValue: cookie};
this.dispatchEvent(new CustomEvent('cookiechange', {
detail: detail
}));
channel.postMessage(detail);
} finally {
lastCookie = cookie;
}
}
}
});
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=/';
注意事项
- 不适用于IE浏览器
- 在Safari浏览器中需要使用BroadcastChannel polyfill
结论
| Metric \ Method | Periodic Polling | API Interception |
| ---------------- | --------------------------- | ---------------- |
| delay | depends on polling interval | instant |
| scope | same-domain | same-origin |