Öbür günün özelliği: Async Cookies API



  1. Öbür günün özelliği: Async Cookies API

JavaScript’te tanımlama bilgileriyle çalışma arayüzünün en az iki sorunu vardır: bir yandan tanımlama bilgilerine erişim tam olarak uygun değildir ve diğer yandan, bunların etrafındaki işlemler senkronize değildir. belge.çerez artık güncellenmiyor. Zaman Uyumsuz Çerezler API’si bunu düzeltmek istiyor.


Geçerli Çerez API’sinin Sınırlamaları



Şimdiye kadar, tanımlama bilgileriyle çalışmak rahat olmaktan çok uzaktı. Varsayılan olarak çerez eklemek, okumak ve silmek için herhangi bir yöntem yoktur. Tüm bunların mülk üzerinde “manuel olarak” yapılması gerekir. belge.çerez yapılacak. Örneğin:

document.cookie = 'examplecookie=hello;
expires=Thu, 25 Oct 2016 20:00:00 UTC; path=/'

Burada, mülk belge.çerez tanımlama bilgisi için uygun ad/değer çiftini içeren bir dize, ardından bir noktalı virgül ve boşluk, ardından tanımlama bilgisinin sona erme tarihi, ardından yine bir noktalı virgül ve boşluk ve son olarak, rotanın belirtimi atanır. Çok kusurlu ve kullanımı hoş değil.

Şunu da belirtmek gerekir ki, mülkiyet belge.çerez kendisi bir karakter dizisi değildir. Özelliğe karakter dizileri atanmasına rağmen, bunlar daha sonra dahili olarak önceden tanımlanmış tanımlama bilgilerine eklenir. Bu, aşağıdaki listede olduğu gibi arka arkaya iki çerez eklerseniz ve ardından yine de çerezleri okursanız görülebilir (bu da özellik aracılığıyla yapılır) belge.çerez olur).

document.cookie = 'examplecookie=hello;
expires=Thu, 25 Oct 2016 20:00:00 UTC; path=/'
document.cookie; // "examplecookie=hello"
document.cookie = 'examplecookie2=world;
expires=Thu, 25 Oct 2016 20:00:00 UTC; path=/'
document.cookie; // "examplecookie=hello; examplecookie2=world"

Mevcut Çerez API’si aracılığıyla çerez eklemek (bunlara çerez demek istiyorsanız) hoş değilse, bireysel çerez değerlerine erişmek veya bireysel çerezleri silmek gerçekten kötüdür – bu durumlarda bunu aşmanın bir yolu yoktur. belge.çerez döndürülen dizeyi ayrıştırın. Ve normal ifadelerle o kadar da eğlenceli değil. Js-cookie gibi kütüphaneler, belirtilen işlemleri belirli işlevler kullanarak basitleştirerek düzeltebilir, ancak asıl sorunu çözmezler.


Kullanışsız çerez analizinden daha ciddi olan, kullandığınız tüm işlemlerin belge.çerez zaman uyumsuz olarak değil, eşzamanlı olarak çalışır; bu, geçmişte genellikle performans sorunlarının nedeniydi.

Bir hizmet çalışanının içindeki tanımlama bilgilerine erişmek istiyorsanız da sorunlu hale gelir. Hizmet çalışanlarının DOM’a, mülke erişimi olmadığı için bugüne kadar bu mümkün bile değildir. kurabiye ama hemen belgeDOM’un giriş noktası.

Eşzamansız tanımlama bilgisi API’sı


Uzun lafın kısası: Uzun vadede, belirtilen nedenlerden dolayı, varsayılan olarak tarayıcılar tarafından zaten desteklenen bir alternatif bulunmalıdır. Ve Web İnkübatörü Topluluk Grubu şu anda böyle bir alternatif üzerinde çalışıyor ve Async Cookies API ile şimdiden bir ilk teklif üzerinde çalıştı.

Buradaki fikir, bir yandan çerezlerin artık (yalnızca) mülkiyete sahip olmamasıdır. belge.çerez işlemek için, ancak adı verilen yeni bir nesne aracılığıyla çerez Mağazasıhem bir web sitesinde hem de hizmet çalışanları içinde mevcut olacak.

Teklif modaliteleri görüyor Sen yaz() veya. kurulum() çerez eklemek için, silmek() iptal için ve okumak() çerezleri okumak için, tüm yöntemler eşzamansız olarak çalışıyor ve her biri Promise nesnesini döndürüyor. Dolayısıyla, çerez eklemek için bir kod örneği şöyle görünebilir:

cookieStore.set(
'examplecookie3',
'helloworld',
{
expires: Date.now() + 24*60*60*1000,
domain: 'Haber'
})
.then(() => {
console.log('Cookie gesetzt');
})
.catch(error => {
console.error(
'Cookie konnte nicht gesetzt werden:',
error
);
});

Temiz, güzel, kullanımı sezgisel. İşte bir geliştiricinin modern bir API’yi nasıl hayal ettiği.

Bu standart işlemlere ek olarak arayüzleri kullanmalıdır. Çerez Gözlemcileri Ve CookieChangeEtkinliği ayrıca çerezlerdeki değişikliklerden haberdar olabileceksiniz:

// Verwenden von CookieObserver
let callback = (cookieChanges, observer) => {
cookieChanges.forEach(({cookieStore, type, url, name, value}) => {
/* ... */
}
}
let observer = new CookieObserver(callback);
observer.observe(cookieStore);
// Verwenden von CookieChangeEvent
addEventListener('cookiechange', event => {
let cookieChanges = event.detail;
cookieChanges.forEach(({cookieStore, type, url, name, value}) => {
/* ... */
});
});

Sonuç ve perspektif


Async Cookies API’nin amacı, tanımlama bilgileriyle çalışmak için eşzamansız bir API sağlamaktır. Teklif hala nispeten genç (GitHub’daki ilk taahhüt şu anda 8 aylık) ve bu nedenle henüz mevcut herhangi bir tarayıcı tarafından desteklenmiyor. Ancak, API’yi çalışırken görmek veya bugün kendiniz test etmek isterseniz, karşılık gelen bir çoklu doldurmayı zaten indirebilirsiniz. GitHub üzerinden veya bu bağlantıdan tartışmayı takip edebilir ve geri bildirimde bulunabilirsiniz.


()



Haberin Sonu
 
Üst