cookieStore:Async Cookie API

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é?