Akses Asinkron ke Cookie HTTP

Victor Costan
X GitHub

Apa itu Cookie Store API?

Cookie Store API mengekspos cookie HTTP ke pekerja layanan dan menawarkan alternatif asinkron untuk document.cookie. API membuatnya lebih mudah untuk:

  • Hindari jank di thread utama, dengan mengakses cookie secara asinkron.
  • Hindari polling untuk cookie, karena perubahan pada cookie dapat diamati.
  • Mengakses cookie dari pekerja layanan.

Baca penjelasan

Status saat ini

Langkah Status
1. Buat penjelasan Selesai
2. Membuat draf awal spesifikasi Selesai
**3. Kumpulkan masukan & melakukan iterasi sesuai spesifikasi** **Dalam proses**
4. Uji coba origin Dijeda
5. Luncurkan Belum dimulai

Bagaimana cara menggunakan penyimpanan cookie asinkron?

Mengaktifkan uji coba origin

Untuk mencobanya secara lokal, API dapat diaktifkan di command line:

chrome --enable-blink-features=CookieStore

Meneruskan flag ini pada command line akan mengaktifkan API secara global di Chrome untuk sesi saat ini.

Atau, Anda dapat mengaktifkan #enable-experimental-web-platform-features flag di chrome://flags.

Anda (mungkin) tidak memerlukan cookie

Sebelum mendalami API baru, saya ingin menyatakan bahwa cookie masih merupakan penyimpanan sisi klien terburuk dari platform, dan masih harus digunakan sebagai upaya terakhir. Ini bukan suatu kebetulan - {i>cookie<i} adalah sisi klien pertama Web mekanisme penyimpanan, dan kami telah belajar banyak sejak saat itu.

Alasan utama untuk menghindari cookie adalah:

  • Cookie memasukkan skema penyimpanan Anda ke dalam API back-end Anda. Setiap permintaan HTTP membawa cuplikan stoples cookie. Hal ini memudahkan insinyur {i>back-end<i} untuk memperkenalkan dependensi pada format cookie saat ini. Satu kali Jika ini terjadi, front-end Anda tidak dapat mengubah skema penyimpanannya tanpa men-deploy perubahan yang sesuai pada {i>back-end<i}.

  • Cookie memiliki model keamanan yang kompleks. Fitur platform Web modern mengikuti kebijakan origin yang sama, artinya bahwa setiap aplikasi mendapat {i>sandbox<i} sendiri, dan sepenuhnya independen dari aplikasi lain yang mungkin dijalankan pengguna. Cakupan cookie menciptakan cerita keamanan yang jauh lebih kompleks, dan hanya mencoba untuk meringkas yang akan menggandakan ukuran artikel ini.

  • Cookie memiliki biaya performa tinggi. Browser perlu menyertakan cuplikan cookie Anda di setiap permintaan HTTP, jadi setiap perubahan pada cookie harus yang disebarkan ke seluruh tumpukan penyimpanan dan jaringan. Browser modern memiliki penerapan penyimpanan cookie yang optimal, tetapi kita tidak dapat membuat cookie seefisien mekanisme penyimpanan lainnya, yang tidak perlu berkomunikasi ke tumpukan jaringan.

Untuk semua alasan di atas, aplikasi Web modern harus menghindari cookie dan sebagai gantinya, simpan ID sesi ke IndexedDB, dan secara eksplisit menambahkan pengenal ke header atau isi permintaan HTTP tertentu, melalui API fetch.

Meskipun demikian, Anda masih membaca artikel ini karena Anda memiliki alasan menggunakan cookie...

Yang terhormat document.cookie API adalah sumber jank yang cukup dijamin untuk aplikasi Anda. Misalnya, setiap kali Anda menggunakan pengambil document.cookie, browser harus berhenti mengeksekusi JavaScript hingga memiliki informasi cookie yang Anda minta. Proses ini dapat memerlukan hop proses atau pembacaan disk, dan akan menyebabkan UI menjadi jank.

Perbaikan langsung untuk masalah ini adalah dengan beralih dari document.cookie pengambil ke Cookie Store API asinkron.

await cookieStore.get('session_id');

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

Penyetel document.cookie dapat diganti dengan cara yang sama. Harap diingat bahwa perubahan hanya dijamin akan diterapkan setelah Promise ditampilkan oleh cookieStore.set di-resolve.

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

// undefined

Amati, jangan lakukan polling

Aplikasi populer untuk mengakses {i> cookie <i}dari JavaScript adalah mendeteksi saat pengguna logout, lalu mengupdate UI. Langkah ini saat ini dilakukan dengan polling document.cookie, yang menyebabkan jank dan berdampak negatif pada baterai kehidupan Anda.

Cookie Store API menghadirkan metode alternatif untuk mengamati cookie perubahan, yang tidak memerlukan polling.

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

Selamat datang pekerja layanan

Karena desain sinkron, document.cookie API tidak dibuat tersedia untuk pekerja layanan. Cookie Store API bersifat asinkron, sehingga diizinkan dalam layanan pekerja.

Berinteraksi dengan cookie berfungsi dengan cara yang sama di konteks dokumen dan di pekerja layanan.

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

Namun, mengamati perubahan cookie sedikit berbeda pada pekerja layanan. Bangun pekerja layanan bisa sangat mahal, jadi kita harus secara eksplisit menggambarkan perubahan cookie yang diminati pekerja tersebut.

Pada contoh di bawah, aplikasi yang menggunakan IndexedDB untuk meng-cache data pengguna memantau perubahan pada cookie sesi, dan membuang data {i>cache<i} saat pengguna keluar.

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

Praktik terbaik

Segera hadir.

Masukan

Jika Anda mencoba menggunakan API ini, beri tahu kami pendapat Anda. Harap arahkan masukan tentang bentuk API ke repositori spesifikasi, dan melaporkan bug implementasi ke Blink>Storage>CookiesAPI Komponen blink.

Kami sangat tertarik untuk mempelajari tentang pengukuran kinerja dan menggunakan kasus di luar yang dijelaskan dalam penjelasan.

Referensi lainnya