Cookie Store API nedir?
Cookie Store API, HTTP çerezlerini hizmet işçilerine gösterir ve document.cookie
için asenkron bir alternatif sunar. API, aşağıdakileri kolaylaştırır:
- Çerezlere eşzamansız olarak erişerek ana iş parçacığında takılmalardan kaçının.
- Çerezlerde değişiklikler gözlemlenebilir olduğundan çerezleri sorgulamak için anket yapmaktan kaçının.
- Hizmet çalışanlarından çerezlere erişme.
Mevcut durum
Step | Durum |
---|---|
1. Açıklayıcı oluşturma | Tamamlandı |
2. Spesifikasyonun ilk taslağını oluşturma | Tamamlandı |
**3. Geri bildirim toplayın ve spesifikasyon üzerinde iterasyon yapın** | **Devam ediyor** |
4. Kaynak denemesi | Duraklatıldı |
5. Başlat | Başlatılmadı |
Asynchronize çerez deposunu nasıl kullanırım?
Kaynak denemesini etkinleştirme
API'yi yerel olarak denemek için komut satırında etkinleştirebilirsiniz:
chrome --enable-blink-features=CookieStore
Komut satırında bu işareti iletmek, API'yi mevcut oturum için Chrome'da dünya genelinde etkinleştirir.
Alternatif olarak, chrome://flags
'ta #enable-experimental-web-platform-features
işaretini etkinleştirebilirsiniz.
(Muhtemelen) çerezlere ihtiyacınız yoktur
Yeni API'ye geçmeden önce, çerezlerin hâlâ web platformunun en kötü istemci tarafı depolama aracı olduğunu ve son çare olarak kullanılması gerektiğini belirtmek isterim. Bu durum tesadüf değildir. Çerezler, web'in istemci tarafında kullanılan ilk depolama mekanizmasıydı ve o zamandan beri çok şey öğrendik.
Çerezleri kullanmamanın başlıca nedenleri şunlardır:
Çerezler, depolama alanı şemanızı arka uç API'nize getirir. Her HTTP isteği, çerez kutusunun anlık görüntüsünü taşır. Bu sayede arka uç mühendisleri, mevcut çerez biçimine bağımlılık ekleyebilir. Bu durumda, ön uçunuz arka uçta eşleşen bir değişiklik dağıtmadan depolama şemasını değiştiremez.
Çerezlerin karmaşık bir güvenlik modeli vardır. Modern web platformu özellikleri aynı kaynak politikasını izler. Bu, her uygulamanın kendi korumalı alanını aldığı ve kullanıcının çalıştırmakta olabileceği diğer uygulamalardan tamamen bağımsız olduğu anlamına gelir. Çerez kapsamları, güvenlik açısından çok daha karmaşık bir konudur ve bu konuyu özetlemeye çalışmak bile bu makalenin boyutunu ikiye katlar.
Çerezlerin performans maliyetleri yüksektir. Tarayıcıların her HTTP isteğine çerezlerinizin anlık görüntüsünü eklemesi gerekir. Bu nedenle, çerezlerde yapılan her değişiklik depolama ve ağ yığınlarına dağıtılmalıdır. Modern tarayıcılarda son derece optimize edilmiş çerez depolama uygulamaları vardır ancak çerezleri, ağ yığınıyla iletişim kurması gerekmeyen diğer depolama mekanizmaları kadar verimli hale getiremeyiz.
Yukarıdaki tüm nedenlerden dolayı, modern web uygulamaları çerezleri kullanmaktan kaçınmalı ve bunun yerine bir oturum tanımlayıcısını IndexedDB'de saklamalı ve fetch API aracılığıyla tanımlayıcıyı belirli HTTP isteklerinin üst bilgisine veya gövdesine açıkça eklemelidir.
Bununla birlikte, çerezleri kullanmaya devam etmek için iyi bir nedeniniz olduğu için bu makaleyi okumaya devam ediyorsunuz...
Çerez okuma ve takılmaları ortadan kaldırma
Eski document.cookie API'si, uygulamanızda takılmalara yol açacak oldukça garantili bir kaynaktır. Örneğin, document.cookie
alıcısını her kullandığınızda tarayıcının, istediğiniz çerez bilgilerine sahip olana kadar JavaScript'i yürütmeyi durdurması gerekir. Bu işlem, bir işlem atlaması veya disk okuması gerektirebilir ve kullanıcı arayüzünüzün takılmasına neden olur.
Bu sorunun basit bir çözümü, document.cookie
geter'den asenkron Cookie Store API'ye geçmektir.
await cookieStore.get('session_id');
// {
// domain: "example.com",
// expires: 1593745721000,
// name: "session_id",
// path: "/",
// sameSite: "unrestricted",
// secure: true,
// value: "yxlgco2xtqb.ly25tv3tkb8"
// }
document.cookie
ayarlayıcısı da benzer şekilde değiştirilebilir. Değişikliğin yalnızca cookieStore.set
tarafından döndürülen Promise'ın çözülmesinden sonra uygulanacağını unutmayın.
await cookieStore.set({name: 'opt_out', value: '1'});
// undefined
Anket yapmayın, gözlemleyin
JavaScript'ten çerezlere erişmek için kullanılan popüler bir uygulama, kullanıcının çıkış yaptığını algılayıp kullanıcı arayüzünü güncellemektir. Bu işlem şu anda document.cookie
anketi yapılarak gerçekleştiriliyor. Bu işlem, takılmalara neden olur ve pil ömrünü olumsuz etkiler.
Cookie Store API, çerez değişikliklerini gözlemlemek için anket gerektirmeyen alternatif bir yöntem sunar.
cookieStore.addEventListener('change', event => {
for (const cookie of event.changed) {
if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
}
for (const cookie of event.deleted) {
if (cookie.name === 'session_id') sessionCookieChanged(null);
}
});
Hizmet çalışanlarına hoş geldiniz
Senkronize tasarım nedeniyle document.cookie
API, hizmet çalışanları tarafından kullanılamaz.
Cookie Store API, asenkron olduğundan hizmet işçilerinde kullanılmasına izin verilir.
Çerezlerle etkileşim kurma, doküman bağlamlarında ve hizmet işçilerinde aynı şekilde çalışır.
// Works in documents and service workers.
async function logOut() {
await cookieStore.delete('session_id');
}
Ancak hizmet çalışanlarında çerez değişikliklerini gözlemlemek biraz farklıdır. Bir hizmet çalışanını uyandırmanın maliyeti oldukça yüksek olabilir. Bu nedenle, çalışanın ilgilendiği çerez değişikliklerini açıkça açıklamamız gerekir.
Aşağıdaki örnekte, kullanıcı verilerini önbelleğe almak için IndexedDB kullanan bir uygulama, oturum çerezindeki değişiklikleri izler ve kullanıcı oturumu kapattığında önbelleğe alınan verileri siler.
// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});
// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
for (const cookie of event.deleted) {
if (cookie.name === 'session_id') {
indexedDB.deleteDatabase('user_cache');
break;
}
}
});
En iyi uygulamalar
Çok yakında.
Geri bildirim
Bu API'yi denerseniz lütfen düşüncelerinizi bizimle paylaşın. API şekliyle ilgili geri bildirimlerinizi lütfen özellik deposuna gönderin ve uygulama hatalarını Blink>Storage>CookiesAPI
Blink bileşenine bildirin.
Özellikle açıklayıcı makalede belirtilenlerin dışındaki performans ölçümleri ve kullanım alanları hakkında bilgi edinmek istiyoruz.
Ek kaynaklar
- Herkese açık açıklama
- Özellik
- İzleme hatası
- chromestatus.com girişi
- WICG Discourse Mesaj Dizisi
- Blink Bileşeni:
Blink>Storage>CookiesAPI