Memilih Antara localStorage, sessionStorage, dan Cookie
Tiga cara menyimpan data di sisi klien memiliki karakteristik berbeda. Pahami kapan harus menggunakan localStorage, sessionStorage, atau cookie.
Saat membuka situs belanja, Anda menambahkan beberapa barang ke keranjang, lalu tanpa sengaja menutup tab. Ketika dibuka kembali, keranjang masih utuh. Di lain waktu, Anda login ke sebuah aplikasi dan tetap masuk meski browser ditutup. Kedua perilaku itu berasal dari mekanisme penyimpanan berbeda: localStorage, sessionStorage, dan cookie. Ketiganya bisa menyimpan data di browser, tetapi cara kerja dan penggunaannya tidak sama. Perbandingan berikut membantu Anda menentukan pilihan.
Apa Itu localStorage, sessionStorage, dan Cookie?
localStorage dan sessionStorage adalah bagian dari Web Storage API yang diperkenalkan bersama HTML5. Keduanya menyimpan data dalam bentuk pasangan kunci-nilai (key-value) dan hanya bisa diakses oleh JavaScript dari origin yang sama. Cookie sudah ada jauh sebelum Web Storage dan awalnya dirancang untuk komunikasi antara browser dan server.
Perbedaan mendasar terletak pada masa hidup data dan cara data dikirim. localStorage menyimpan data tanpa batas waktu hingga dihapus secara manual. sessionStorage menyimpan data selama tab atau jendela browser masih terbuka. Cookie memiliki atribut kedaluwarsa dan, jika tidak diatur sebagai HttpOnly, akan ikut terkirim ke server pada setiap permintaan HTTP.
Perbandingan Kapasitas dan Aksesibilitas
Kapasitas penyimpanan menjadi pertimbangan pertama. localStorage dan sessionStorage umumnya menyediakan kuota sekitar 5MB per origin, meskipun angka pastinya bergantung pada browser. Cookie jauh lebih kecil, hanya sekitar 4KB per cookie, dan setiap permintaan ke server akan membawa seluruh cookie yang relevan. Jika Anda menyimpan banyak data di cookie, kinerja jaringan bisa menurun karena header HTTP membengkak.
Dari sisi akses, localStorage dan sessionStorage hanya bisa dibaca melalui JavaScript di halaman yang berasal dari origin yang sama. Cookie dapat diakses oleh JavaScript (kecuali HttpOnly) dan juga oleh server. Atribut HttpOnly membuat cookie tidak bisa dibaca JavaScript, sehingga lebih aman untuk menyimpan token sesi. Cookie tetap rentan terhadap serangan CSRF jika tidak dilindungi dengan atribut SameSite.
Kapan Sebaiknya Menggunakan localStorage?
localStorage cocok untuk data yang perlu bertahan lama dan tidak sensitif. Contohnya preferensi tampilan seperti tema gelap atau terang, pengaturan bahasa, dan draf konten yang belum selesai. Data di localStorage tidak memiliki masa kedaluwarsa, jadi Anda perlu menghapusnya sendiri ketika sudah tidak diperlukan.
Hindari menyimpan informasi rahasia seperti token autentikasi atau data pribadi pengguna di localStorage. Skrip berbahaya yang berhasil disisipkan ke halaman (XSS) dapat membaca seluruh isi localStorage. Jika Anda perlu menyimpan status login, cookie dengan atribut HttpOnly dan Secure lebih aman. Untuk mengelola data yang kompleks, Anda bisa menggabungkan localStorage dengan teknik iterasi array seperti yang dijelaskan di panduan memilih metode iterasi array.
Kapan Sebaiknya Menggunakan sessionStorage?
sessionStorage tepat dipakai untuk data sementara yang hanya relevan selama satu sesi tab. Misalnya, Anda mengisi formulir multi-langkah dan ingin menyimpan isian sementara agar tidak hilang saat berpindah halaman. Begitu tab ditutup, data otomatis dibersihkan. Ini juga berguna untuk menyimpan state filter pada halaman pencarian yang tidak perlu diingat setelah pengguna menutup tab.
sessionStorage terpisah untuk setiap tab. Membuka halaman yang sama di tab baru akan menghasilkan sessionStorage kosong. Jika Anda memerlukan data yang tetap ada di beberapa tab, localStorage atau cookie lebih sesuai.
Kapan Cookie Masih Diperlukan?
Cookie menjadi pilihan utama ketika server perlu membaca data pada setiap permintaan. Sesi login, pelacakan analitik, dan preferensi yang harus tersedia di sisi server adalah contoh umum. Cookie juga dapat diatur dengan atribut Domain dan Path untuk membatasi cakupannya.
Untuk keamanan, gunakan atribut Secure agar cookie hanya dikirim melalui HTTPS, HttpOnly untuk mencegah akses JavaScript, dan SameSite untuk mengurangi risiko CSRF. Mengatur cookie melalui JavaScript memang mungkin, tetapi untuk data sensitif sebaiknya atur dari server melalui header Set-Cookie.
Ringkasan Perbandingan
| Aspek | localStorage | sessionStorage | Cookie |
|---|---|---|---|
| Masa hidup | Hingga dihapus | Selama tab terbuka | Sesuai atribut Expires/Max-Age |
| Kapasitas | ~5MB | ~5MB | ~4KB per cookie |
| Dikirim ke server | Tidak | Tidak | Ya, jika tidak HttpOnly |
| Akses JavaScript | Ya | Ya | Ya, kecuali HttpOnly |
| Cocok untuk | Preferensi, draf | Data sementara per tab | Sesi, pelacakan, data server |
Pertanyaan yang Sering Diajukan
Apakah localStorage bisa menghapus data sendiri?
Tidak. Data di localStorage tidak memiliki mekanisme kedaluwarsa otomatis. Anda harus menghapusnya secara eksplisit dengan localStorage.removeItem('kunci') atau localStorage.clear().
Bisakah cookie menyimpan objek atau array?
Cookie hanya menyimpan string. Untuk menyimpan objek, Anda perlu mengubahnya menjadi string JSON terlebih dahulu, misalnya dengan JSON.stringify(), lalu mengubahnya kembali saat membaca. Kapasitas 4KB membuat cookie tidak ideal untuk data besar.
Apakah sessionStorage aman dari serangan XSS?
Tidak. Seperti localStorage, sessionStorage dapat dibaca oleh JavaScript yang berjalan di halaman. Jika ada celah XSS, penyerang bisa mengakses data di dalamnya. Selalu validasi dan sanitasi input pengguna, serta terapkan Content Security Policy untuk mengurangi risiko.
Memilih media penyimpanan yang tepat bergantung pada kebutuhan Anda. Gunakan localStorage untuk data persisten yang tidak sensitif, sessionStorage untuk data sementara per tab, dan cookie ketika server perlu membaca data pada setiap permintaan. Pertimbangkan aspek keamanan, terutama untuk informasi sensitif.
