给我一个案例代码
时间: 2024-02-09 11:09:38 浏览: 21
好的,这里是一个使用 MutationObserver API 监听 Cookie 变化的案例代码:
```javascript
// 创建一个 MutationObserver 对象
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
// 判断是否有新的 cookie 被添加
if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
console.log('Cookie changed:', mutation.target.value);
}
});
});
// 监听 cookie 的变化
const cookieInput = document.createElement('input');
cookieInput.type = 'hidden';
cookieInput.value = document.cookie;
document.body.appendChild(cookieInput);
observer.observe(cookieInput, { attributes: true });
// 模拟 Cookie 的变化
setTimeout(() => {
document.cookie = 'username=john';
}, 2000);
```
上述代码通过创建一个 MutationObserver 对象,监听一个隐藏的 input 元素的 value 属性变化,当 Cookie 变化时,就会触发 MutationObserver 的回调函数,并打印出变化的 Cookie 信息。
为了模拟 Cookie 的变化,代码中使用了一个 setTimeout 函数,等待 2 秒后修改了 Cookie 的值。在实际应用中,这个过程是由服务器端完成的。
需要注意的是,由于 Cookie 存储在浏览器的 Document 中,因此在监听 Cookie 变化时,需要将监听对象设置为 Document 中的某个元素,例如上述代码中的隐藏的 input 元素。