Um padrão no mundo das APIs JavaScript que os veteranos em desenvolvimento da Web perceberão é que estamos criando novos métodos para realizar o que as APIs mais antigas e grosseiras já realizaram. XMLHttpRequest tornou-se a fetch algumas APIs, como a Battery, tornaram-se assíncronas, e há dezenas de outros exemplos. Outra API que precisa desesperadamente de atualização é a API de cookies… e finalmente conseguimos: cookieStore.
A nova API de cookies, cookieStore, é assíncrona e fornece um método lógico para o gerenciamento de cookies. É preciso lembrar que o método anterior de obter e definir cookies girava completamente em torno da concatenação e análise de document.cookie como uma string. O senhor não acredita em mim? Dê uma olhada nessa monstruosidade!
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');
}
Vamos nos concentrar no uso dessa nova API, cookieStore, para trazer sanidade aos cookies!
Se realmente quiser ver como os cookies são apresentados a você agora, acesse seu site favorito e digite document.cookie . Que horror!
Definir um cookie
cookieStore.set permite que o senhor defina um cookie com nome, valor e outros detalhes específicos:
// 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');
Isso é muito melhor do que concatenar uma string estranha em uma string já estranha document.cookie!
Obter um cookie
cookieStore.get fornece um método para obter o valor de um cookie específico:
const testCookie = await cookieStore.get('dw-test');
{
domain: "davidwalsh.name",
expires: 3206289322149,
name: "dw-test",
path: "/",
sameSite: "strict",
secure: true,
value: "1",
}
Se o cookie existir e não tiver expirado, o valor e muito mais sobre o cookie serão retornados. Sim, um simples get em vez de analisar uma string! Tenho lágrimas nos olhos!
Excluir um cookie
Podemos usar cookieStore.delete para remover um cookie:
await cookieStore.delete('dw-test');
Tão simples quanto o senhor espera!
Evento de mudança de cookie
Se quiser saber quando os cookies estão sendo criados, excluídos ou modificados, o senhor pode ouvir o evento change no site do 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`);
});
Estou muito feliz que o antigo document.cookie esteja sendo substituído por este incrível e simples cookieStore API. Avante e para cima com as APIs JavaScript! Qual API herdada o senhor gostaria de ver melhorada em seguida?
