I am using angular: 15.2.10 for my project. I have created an angular service which can listen to cookie changes by leveraging the CookieStore Api. My current code looks as follows:
type CookieChangeType = {
name: string,
value: string,
expires: Date,
domain: string,
}
interface CookieChangeEvent extends Event {
changed: CookieChangeType[]
}
type CookieStore = {
addEventListener: Window["addEventListener"]
}
declare global {
interface Window {
cookieStore: CookieStore;
addEventListener(type: String, listener: (this: Window, ev: CookieChangeEvent) => any, useCapture?: boolean): void;
}
}
export class CookieConsentCommonsService {
subscribeToConsentCookieChange(callback: () => void): void {
window.cookieStore.addEventListener('change', (event: CookieChangeEvent) => {
console.log(`Cookie changed: ${change.name} = ${change.value}`);
callback();
});
}
}
This code works as expected. On the top of that I would like to be able to cancel the subscription. I have tried to store the subscription for later :
const sub = window.cookieStore.addEventListener( ...);
console.log("sub " + sub)
But there is no return from this code and the output message is:
sub undefined
How can I retrieve a reference for created subscription and later on use it to cancel the subscription?
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener
function handleChange() {
// ...
}
// sub
window.cookieStore.addEventListener('change', handleChange);
// unsub
window.cookieStore.removeEventListener('change', handleChange);
or
const controller = new AbortController();
// sub
window.cookieStore.addEventListener('change', handleChange, { signal: controller.signal });
// unsub
controller.abort();
ts
// Cookie interface definition
interface Cookie {
name: string;
value: string;
expires?: Date | null; // Optional expiration time
path?: string; // Optional path
domain?: string; // Optional domain
secure?: boolean; // Optional secure flag
sameSite?: 'lax' | 'strict' | 'none'; // Optional SameSite attribute
}
// CookieStore interface inheriting from EventTarget
interface CookieStore extends EventTarget {
get(name: string): Promise<Cookie | null>;
getAll(): Promise<Cookie[]>;
set(cookie: Cookie): Promise<void>;
delete(name: string): Promise<void>;
}
// Adding CookieStore to the global window object
declare global {
interface Window {
cookieStore: CookieStore;
}
}