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.
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...
Membaca cookie dan menghilangkan jank
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
- Penjelasan untuk publik
- Spesifikasi
- Bug pelacakan
- entri chromestatus.com
- Thread Discourse WICG
- Komponen Kedipan:
Blink>Storage>CookiesAPI