Web dirancang sedemikian rupa sehingga setiap permintaan dari browser web ke situs bersifat terpisah. Menurut desainnya, web tidak memiliki "memori". Setiap kali Anda membuka halaman web, situs yang Anda kunjungi tidak dapat mengingat informasi dari sesi terakhir Anda. Hal ini membantu membuat web menjadi efisien, karena tidak ada mekanisme untuk melacak permintaan dan respons.
Namun, sifat web yang mudah dilupakan juga menimbulkan masalah. Misalnya, bagaimana keranjang belanja dapat berfungsi jika situs yang Anda buka tidak dapat mengingat apa yang baru saja Anda masukkan ke dalamnya?
Cookie diciptakan untuk mengatasi masalah tersebut.
Cookie memberikan memori ke situs
Saat Anda mengunjungi halaman di situs, browser web Anda membuat permintaan ke server situs untuk resource yang disertakan di halaman, seperti HTML, CSS, JavaScript, atau gambar.
Browser web dan situs berinteraksi dengan mengikuti protokol HTTP. Ini adalah sekumpulan aturan standar untuk komunikasi.
Sebagai respons terhadap permintaan HTTP untuk suatu resource, server situs dapat menyertakan informasi tambahan yang disebut
header bersama dengan resource itu sendiri. Header Set-Cookie yang disertakan dengan respons HTTP
memberi tahu browser Anda untuk menyimpan beberapa teks: nama dan nilai. Hal ini dikenal sebagai
cookie. Misalnya, header respons Set-Cookie: cat=tabby memberi tahu browser Anda untuk menyimpan cookie dengan nama "cat" dan nilai "tabby".
Setelah cookie tersebut ditetapkan, permintaan berikutnya dari browser Anda ke situs akan menyertakan
header Cookie: cat=tabby. Server situs dapat mengakses cookie dari header permintaan, dan menggunakan nilainya.
Cara kerja cookie: langkah demi langkah
Bayangkan Anda membuka situs cats.example. Situs ingin menampilkan gambar kucing acak kepada Anda, dan menyimpan catatan kucing mana yang ditampilkan kepada Anda.
Langkah-langkah berikut menjelaskan cara melakukannya dengan cookie.
1. Browser meminta file
Anda mengunjungi halaman beranda situs cats.example.
Setelah memproses HTML halaman beranda, browser Anda akan meminta file di halaman, termasuk cat.jpg dari cats.example.
2. Server situs merespons
Server di cats.example merespons dengan file gambar cat.jpg.
Dengan respons, server menyertakan header: Set-Cookie: cat=tabby.
3. Browser menerima respons
Browser Anda menerima file gambar, dan memproses header Set-Cookie: cat=tabby yang disertakan.
Cookie disimpan: nama cat, nilai tabby.
4. Browser membuat permintaan tambahan
Mulai sekarang, browser Anda akan menyertakan header Cookie: cat=tabby dengan permintaan ke cats.example.
Saat server web cats.example menerima permintaan, server tersebut dapat memproses cookie
dan melakukan apa pun yang diinginkannya dengan nilai tersebut—seperti memastikan server tidak mengirimkan
gambar kucing tabby yang sama kepada Anda lagi.
Berikut seluruh proses cookie:
- Browser Anda meminta file dari server situs.
- Server dapat menyertakan header, seperti
Set-Cookie: cat=tabby, dengan file yang dikirim sebagai respons terhadap permintaan. - Saat browser Anda menerima respons, browser akan menyimpan cookie.
- Dengan setiap permintaan berikutnya, browser Anda akan mengirimkan cookie ke server di header
Cookie: cat=tabby.
Mengakses cookie dengan JavaScript
Contoh sebelumnya menggunakan header respons Set-Cookie untuk menyetel cookie.
Cookie juga dapat dibuat dengan JavaScript menggunakan metode document.cookie.
Coba demo: javascript-cookie.glitch.me.
Pelajari lebih lanjut: Dokumen: properti cookie.
Mengapa kami memerlukan cookie?
Pada tahun 1994, engineer Lou Montulli bekerja di perusahaan software Netscape, yang kemudian membangun browser web paling populer pada pertengahan tahun 1990-an.
Sementara itu, perusahaan telekomunikasi, MCI, sedang mencoba membuat keranjang belanja untuk salah satu toko online pertama di dunia. MCI menghubungi Montulli untuk menjelaskan masalah mereka. Montulli merespons dengan menambahkan fitur ke HTTP yang memungkinkan situs menyimpan sejumlah kecil teks di browser web pengguna, nama dan nilai: seperti cart-id=123. Dia menyebutnya "cookie", karena pada masa itu programmer menggunakan kata "cookie ajaib" untuk sepotong kecil informasi tambahan yang disertakan dengan komunikasi data.
Montulli menyelesaikan pekerjaan cookie HTTP-nya dalam waktu kurang dari seminggu. Ia tidak menyadari bahwa cookie akan menjadi hal mendasar bagi fitur platform web penting, termasuk iklan, login, pembayaran, dan deteksi penipuan. Cookie adalah teknologi yang tampak sederhana, tetapi memiliki efek samping yang luas.
Penggunaan cookie
Cookie memungkinkan browser menyimpan sejumlah kecil informasi tentang pengguna, untuk "mengingat" sesuatu di beberapa permintaan. Cookie memiliki beberapa penggunaan:
- Pengelolaan sesi
Memungkinkan situs mengenali pengguna, misalnya untuk mempertahankan status login di berbagai halaman. - Personalisasi
Menyimpan preferensi pengguna seperti bahasa, tema, atau item yang baru dilihat, untuk menyesuaikan pengalaman situs. - Pelacakan
Secara historis, cookie telah digunakan untuk melacak perilaku pengguna di berbagai situs, untuk iklan bertarget dan kasus penggunaan lainnya.
Cookie sebagian besar digunakan untuk ID, bukan untuk menyimpan informasi secara langsung.
Misalnya, cookie untuk keranjang belanja Anda di toko hewan peliharaan online tidak akan mencantumkan produk, tetapi memberikan ID akun yang memungkinkan toko hewan peliharaan mencari apa yang ada di keranjang Anda, di penyimpanan data sisi servernya.
Permintaan ke server toko hewan peliharaan mungkin menyertakan header cookie seperti ini:
Cookie: _cart=CART1.2.34567890.123456789
Kemudian, server dapat mencari akun _cart di penyimpanan datanya, dan menyertakan
informasi lain tentang permintaan tersebut.
Cari tahu lebih lanjut
- Atribut cookie
- Apa yang dimaksud dengan cookie pihak ketiga?
- Permintaan dan respons HTTP
- Alat cookie
- Demo cookie
- Menggunakan cookie HTTP
- The Magic Cookie: How Lou Montulli cured the Web's amnesia
- Cookie HTTP (spesifikasi asli)
- Cookie HTTP, atau cara tidak mendesain protokol