HTTP Çerezlerine Eşzamansız Erişim

Victor Costan
X GitHub

Cookie Store API nedir?

Cookie Store API, HTTP çerezlerini hizmet çalışanlarına sunar ve document.cookie için eşzamansız bir alternatif sunar. API, şu işlemleri yapmak daha kolaydır:

  • Çerezlere eşzamansız olarak erişerek ana iş parçacığında olumsuzlukları önleyin.
  • Çerezlerde değişiklikler görülebileceği için çerezleri yoklamaktan kaçının.
  • Hizmet çalışanlarından gelen çerezlere erişin.

Açıklayıcıyı okuyun

Mevcut durum

Adım Durum
1. Açıklayıcı oluşturun Tamamlandı
2. İlk spesifikasyon taslağını oluşturun Tamamlandı
**3. Geri bildirim toplama yineleyin** **Devam ediyor**
4. Kaynak denemesi Duraklatıldı
5. Başlat Başlatılmadı

Eş zamansız çerez deposunu nasıl kullanabilirim?

Kaynak denemesini etkinleştir

API, yerel olarak denemek için komut satırında etkinleştirilebilir:

chrome --enable-blink-features=CookieStore

Bu işareti komut satırında iletmek, API'nin Chrome'da devam eder.

Alternatif olarak, #enable-experimental-web-platform-features chrome://flags işaretidir.

Muhtemelen çerezlere ihtiyacınız yok

Yeni API'yi kullanmaya başlamadan önce, çerezlerin hâlâ web platformu en kötü istemci taraflı depolama bileşenidir ve yine de son çare. Bu bir kaza değildir; çerezler, web'in ilk istemci tarafıdır hale geldi. O zamandan beri çok şey öğrendik.

Çerezlerden kaçınmanın başlıca nedenleri şunlardır:

  • Çerezler, depolama şemanızı arka uç API'nize taşır. Her HTTP isteği, çerez deposunun bir anlık görüntüsünü taşır. Bu da ekibinizin arka uç mühendislerinin mevcut çerez biçimine bağımlılıkları bildirmesine yardımcı olur. Bir kez kullanıcı arabiriminiz, RACI matrislerini dağıtmadan eşleşen bir değişiklik yapar.

  • Çerezlerin karmaşık bir güvenlik modeli vardır. Modern Web platformu özellikleri de aynı kaynak politikasına tabidir. her uygulama kendi korumalı alanına sahip olur ve diğer uygulamaları kullanabilirsiniz. Çerez kapsamları bir güvenlik öyküsü yaratır ve bu durum, özetleyelim.

  • Çerezlerin yüksek performans maliyetleri vardır. Tarayıcıların, sitenin anlık görüntüsünü her HTTP isteğindeki çerezlerinizi saklar. Bu nedenle, çerezlerde yapılan her değişiklik depolama ve ağ yığınlarına yayılır. Modern tarayıcılar, optimize edilmiş çerez mağazası uygulamaları sunar, ancak kadar etkili olduğundan, bunların yalnızca ekler.

Yukarıdaki tüm nedenlerden dolayı, modern Web uygulamaları çerezlerden ve bir oturum tanımlayıcısını IndexedDB ve tanımlayıcıyı belirli HTTP isteklerinin başlığına veya gövdesine açık bir şekilde eklemek, getirme API'si aracılığıyla yükleyebilirsiniz.

Bununla birlikte, bu makaleyi okumaya devam ediyorsunuz çünkü neden çerezleri kullanmak istiyorsunuz?

Saygıdeğer document.cookie API, uygulamanız için oldukça garanti edilen bir olumsuzluk kaynağıdır. Örneğin, document.cookie alıcısını her kullandığınızda tarayıcının yürütmeyi durdurması gerekir İstediğiniz çerez bilgilerini içerene kadar JavaScript'i kullanmaya devam edin. Bu işlem işlemi atlar veya disk okuması yapar, bu da kullanıcı arayüzünüzün can sıkıcı olmasına neden olur.

document.cookie üzerinden geçiş yaparak bu sorunu kolayca çözebilirsiniz. alıcıyı eşzamansız Çerez Mağazası API'sine bağlamayı unutmayın.

await cookieStore.get('session_id');

// {
//   domain: "example.com",
//   expires: 1593745721000,
//   name: "session_id",
//   path: "/",
//   sameSite: "unrestricted",
//   secure: true,
//   value: "yxlgco2xtqb.ly25tv3tkb8"
// }

document.cookie belirleyicisi benzer şekilde değiştirilebilir. Unutmamanız gereken noktalar değişikliğin yalnızca cookieStore.set çözümlenir.

await cookieStore.set({name: 'opt_out', value: '1'});

// undefined

Gözlemleyin, anket yapmayın

JavaScript'ten çerezlere erişmek için kullanılan popüler bir uygulama, Kullanıcı çıkış yapıp kullanıcı arayüzünü günceller. Bu işlem şu anda anket yoluyla yapılıyor document.cookie, olumsuz etkiye neden olur ve pili olumsuz yönde etkiler hayat.

Cookie Store API, çerezi gözlemlemek için alternatif bir yöntem sunar veya bu da yoklama gerektirmez.

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);
  }
});

Service Worker'ları karşılayın

Eşzamanlı tasarımdan dolayı document.cookie API oluşturulmadı. şunlar için kullanılabilir: Service Worker'lar ile iletişime geçebilirsiniz. Cookie Store API'si eşzamansız olduğundan hizmette kullanılmasına izin verilir birlikte çalışır.

Çerezlerle etkileşim, doküman bağlamlarında ve bağlamlarda hizmet çalışanları.

// Works in documents and service workers.
async function logOut() {
  await cookieStore.delete('session_id');
}

Ancak çerez değişikliklerini gözlemleme, hizmet çalışanlarında biraz farklıdır. Uyanma bir hizmet çalışanının maliyeti oldukça pahalı olabilir. Bu nedenle, çalışanın ilgilendiği çerez değişiklikleri.

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 kapatır.

// 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. Lütfen doğrudan geri bildirim verin. spesifikasyon deposunu, ve uygulama hatalarını Blink>Storage>CookiesAPI Blink bileşeni.

Özellikle, performans ölçümleri ve performans metrikleri hakkında bilgi edinmek, açıklamada belirtilenlerin dışındaki durumlarda.

Ek kaynaklar