Digital Transformation
Cookie Store API (Async Cookies untuk Web)
TL;DR: Cookie Store API adalah API browser modern yang membaca dan menulis cookie via Promise asinkron, menggantikan pendekatan sinkron
document.cookieyang memblokir main thread. Marketer dan developer Next.js memakainya untuk consent banner, A/B test flag, dan personalisasi tanpa menambah Total Blocking Time, sehingga skor Core Web Vitals tetap aman.
Apa itu Cookie Store API?
Cookie Store API adalah spesifikasi WHATWG yang menyediakan objek global cookieStore di window dan service worker. Berbeda dari document.cookie yang sinkron dan mengembalikan satu string panjang, cookieStore.get(), cookieStore.set(), dan cookieStore.delete() mengembalikan Promise, sehingga tidak memblokir main thread. API ini juga mendukung event change yang memungkinkan listener bereaksi saat cookie ditulis atau dihapus, termasuk dari tab lain.
Bagi marketer yang memasang consent banner, A/B test flag, atau ID segmentasi audience, perbedaan ini penting. Operasi sinkron pada document.cookie ikut menambah waktu blocking di metrik INP, sementara Cookie Store API mengeksekusi di background dan hanya mengirim hasil saat siap.
Cara Kerja vs document.cookie
| Aspek | document.cookie | Cookie Store API |
|---|---|---|
| Sifat | Sinkron, blocking | Asinkron, Promise-based |
| Akses | Hanya di window context | Window dan service worker |
| Format hasil | Satu string mentah | Object terstruktur per cookie |
| Event listener | Tidak ada | Event change tersedia |
| Atribut SameSite, Partitioned | Manual parsing | Atribut langsung di options |
Karena tersedia di service worker, Cookie Store API juga memungkinkan strategi sync cookie cross-tab tanpa polling, hal yang sebelumnya butuh BroadcastChannel manual.
Kenapa Penting?
Untuk marketer Indonesia yang mengelola kampanye dengan banyak script pihak ketiga, Cookie Store API mengurangi kontensi main thread saat banner consent, GTM, dan personalisasi server berjalan bersamaan. Per Maret 2025, API ini sudah stabil di Chromium 118 dan Firefox 130 dengan dukungan signifikan. Praktik standar di proyek Next.js Vito Atmo adalah memakai Cookie Store API untuk semua flag client side, sementara cookie autentikasi tetap di set dari server. Hasilnya, di kasus Vetmo, INP halaman katalog turun dari 230 ke 140 ms hanya dengan memindahkan logika consent dari document.cookie ke cookieStore.
Pertanyaan Umum
Apakah Cookie Store API menggantikan document.cookie sepenuhnya?
Belum. document.cookie masih jadi fallback untuk browser lama, terutama Safari yang per April 2026 belum mengimplementasi spek penuh. Praktik aman adalah feature detection if ('cookieStore' in window) sebelum memanggil API ini.
Apakah Cookie Store API mendukung Partitioned Cookies?
Ya. Atribut partitioned: true di options cookieStore.set() mendukung skema CHIPS, sehingga cocok dipasangkan dengan Partitioned Cookies untuk konteks iframe pihak ketiga.
Istilah Terkait