Jedním ze vzorů ve světě JavaScript API, kterého si veteráni webového vývoje všimnou, je, že jsme vytvářeli nové metody, abychom dosáhli toho, co kdysi dosahovala starší, hrubší API. XMLHttpRequest
se stal fetch
API, některá rozhraní API, jako je baterie, se stala asynchronní a existují desítky dalších příkladů. Další API, které zoufale potřebuje aktualizaci, je cookie API...a konečně jsme ho dostali:cookieStore
.
Nové rozhraní cookie pro soubory cookie, cookieStore
, je asynchronní a poskytuje logickou metodu pro správu souborů cookie. Musíte si uvědomit, že předchozí metoda získávání a nastavení souborů cookie se zcela točila kolem zřetězení a analýzy document.cookie
jako struna. Nevěříš mi? Podívejte se na toto monstrum!
document.cookie = '__Secure-COOKIENAME=cookie-value' + '; Path=/' + '; expires=Fri, 12 Aug 2016 23:05:17 GMT' + '; Secure' + '; Domain=example.org'; // now we could assume the write succeeded, but since // failure is silent it is difficult to tell, so we // read to see whether the write succeeded var successRegExp = /(^|; ?)__Secure-COOKIENAME=cookie-value(;|$)/; if (String(document.cookie).match(successRegExp)) { console.log('It worked!'); } else { console.error('It did not work, and we do not know why'); }
Zaměřme se na používání tohoto nového rozhraní API, cookieStore
, vnést do cookies zdravý rozum!
Pokud opravdu chcete vidět, jak se vám nyní zobrazují soubory cookie, přejděte na svůj oblíbený web a zadejte document.cookie
. Hrůza!
Nastavit soubor cookie
cookieStore.set
umožňuje nastavit soubor cookie s názvem, hodnotou a dalšími specifiky:
// All cookieStore methods are async, so you can `await` or `then`/`catch` await cookieStore.set({ name: "dw-test", value: 1, domain: 'davidwalsh.name', // Very far in the future! expires: Date.now() + Date.now() }); // Quick, naive set await cookieStore.set('key', 'value');
To je mnohem lepší než zřetězení lichého řetězce na a již lichý document.cookie
!
Získejte soubor cookie
cookieStore.get
poskytuje metodu pro získání hodnoty konkrétního cookie:
const testCookie = await cookieStore.get('dw-test'); { domain: "davidwalsh.name", expires: 3206289322149, name: "dw-test", path: "/", sameSite: "strict", secure: true, value: "1", }
Pokud soubor cookie existuje a jeho platnost nevypršela, vrátí se hodnota a mnoho dalšího o souboru cookie. Ano – jednoduchý get
metoda namísto analýzy řetězce! Slzy v očích!
Smazat soubor cookie
Můžeme použít cookieStore.delete
pro odstranění souboru cookie:
await cookieStore.delete('dw-test');
Přesně tak jednoduché, jak byste očekávali!
Událost změny souboru cookie
Pokud chcete vědět, kdy jsou soubory cookie vytvářeny, mazány nebo upravovány, můžete si poslechnout change
událost na cookieStore
:
cookieStore.addEventListener('change', event => { console.log(`${event.changed.length} changed cookies`); for (const cookie in event.changed) console.log(`Cookie ${cookie.name} changed to ${cookie.value}`); console.log(`${event.deleted.length} deleted cookies`); for (const cookie in event.deleted) console.log(`Cookie ${cookie.name} deleted`); });
Jsem tak šťastný, že starý document.cookie
je v podstatě nahrazen tímto úžasným, ale jednoduchým cookieStore
API. Vpřed a nahoru s JavaScript API! Které starší rozhraní API byste rádi viděli jako další vylepšené?