Local storage, session storage, dan cookies sama-sama membiarkan peramban menyimpan data milik situs web. Karena ketiganya terlihat mirip, banyak pemula memakainya secara bergantian tanpa tahu akibatnya. Padahal pilihan yang keliru bisa membuat data hilang di saat yang salah, memperlambat permintaan ke server, atau membuka celah keamanan.
Artikel ini menjawab pertanyaan utamanya: apa perbedaan local storage, session storage, dan cookies? Kamu akan memahami cara kerja masing-masing, tujuh perbedaan utamanya, contoh kode yang bisa langsung dicoba, aturan keamanan dasar, dan panduan kapan memakai yang mana. Penjelasan resmi API-nya ada di dokumentasi Web Storage API di MDN.
Ringkasan cepat
- Local storage: data bertahan sampai dihapus, tersedia di semua tab situs yang sama, tidak dikirim ke server.
- Session storage: data hanya hidup selama tab terbuka dan terpisah di setiap tab.
- Cookies: data kecil yang dikirim otomatis ke server di setiap permintaan, dan bisa diberi atribut keamanan.
- Jangan menyimpan data sensitif seperti token login di tempat yang bisa dibaca JavaScript.
Daftar Isi
- Apa itu ketiganya
- Mengapa browser menyediakan tiga cara
- Cara kerja local storage
- Cara kerja session storage
- Cara kerja cookies
- 7 perbedaan utama
- Contoh kode local storage dan session storage
- Contoh kode cookies
- Keamanan: apa yang boleh disimpan
- Kapan memakai yang mana
- Alternatif lain
- Melihat dan menghapus data di DevTools
- Kesalahan umum
- Mitos yang beredar
- Pertanyaan yang sering diajukan
Apa Itu Local Storage, Session Storage, dan Cookies?
Ketiganya adalah mekanisme penyimpanan data di sisi klien, yaitu di peramban milik pengguna, bukan di server.
- Local storage menyimpan pasangan kunci dan nilai yang bertahan lama di peramban, bahkan setelah peramban ditutup.
- Session storage serupa, tetapi datanya hilang saat tab atau jendela ditutup.
- Cookies adalah potongan data kecil yang dikirim bersama setiap permintaan HTTP ke server yang sesuai. Cookies lebih tua dan punya peran khusus dalam komunikasi dengan server.
Mengapa Peramban Menyediakan Tiga Cara Menyimpan Data?
Karena kebutuhannya berbeda. Cookies muncul lebih dulu untuk membuat server “mengingat” pengunjung, misalnya agar tetap masuk setelah login. Seiring waktu, aplikasi web membutuhkan tempat menyimpan data lebih besar di sisi klien tanpa membebani setiap permintaan ke server. Dari kebutuhan itulah lahir Web Storage, yaitu local storage dan session storage.
Kamu bisa membayangkannya begini: cookies adalah kartu identitas yang selalu ditunjukkan ke server, local storage adalah laci permanen di peramban, dan session storage adalah catatan sementara di meja yang dibuang saat tab ditutup.
Cara Kerja Local Storage
- Bertahan lama. Data tetap ada sampai dihapus oleh kode, pengguna, atau peramban.
- Dibagi antar tab. Semua tab dan jendela dari situs yang sama (asal yang sama) membaca data yang sama.
- Hanya teks. Nilai disimpan sebagai string. Objek harus diubah dulu ke JSON.
- Tidak dikirim ke server secara otomatis.
- API sinkron. Pembacaan dan penulisan terjadi seketika dan bisa menghambat halaman jika datanya besar.
- Terikat pada asal. Data dipisahkan berdasarkan kombinasi protokol, domain, dan port, sehingga situs lain tidak bisa membacanya.
Cara Kerja Session Storage
- Hidup sepanjang sesi tab. Data hilang saat tab atau jendela ditutup, tetapi tetap ada saat halaman dimuat ulang.
- Terpisah per tab. Dua tab dari situs yang sama punya session storage masing-masing.
- Antarmuka sama dengan local storage. Perintahnya identik, hanya objeknya berbeda.
- Tidak dikirim ke server.
Berbeda dengan local storage, data session storage tidak dibagikan antar tab, sehingga cocok untuk data yang hanya relevan bagi satu alur kerja di satu tab.
Cara Kerja Cookies
Cookies diatur oleh server lewat header respons, atau oleh JavaScript lewat document.cookie. Peramban lalu menyertakannya secara otomatis di setiap permintaan ke domain yang cocok. Penjelasan lengkapnya ada di dokumentasi HTTP cookies di MDN.
- Dikirim otomatis ke server. Ini kekuatan sekaligus kelemahannya: server bisa mengenali pengguna, tetapi setiap permintaan ikut membawa data cookies.
- Ukuran sangat kecil. Batasnya sekitar 4 KB per cookie, dengan jumlah terbatas per domain.
- Punya masa berlaku. Cookie bisa kedaluwarsa pada waktu tertentu, atau menjadi cookie sesi yang hilang saat peramban ditutup.
- Punya atribut keamanan. Misalnya
HttpOnly,Secure, danSameSite. - Bisa dibuat oleh server maupun skrip.
7 Perbedaan Local Storage, Session Storage, dan Cookies
| Aspek | Local storage | Session storage | Cookies |
|---|---|---|---|
| 1. Kapasitas | Sekitar 5 MB per asal (bervariasi antar peramban) | Sekitar 5 MB per asal | Sekitar 4 KB per cookie |
| 2. Masa hidup | Sampai dihapus | Sampai tab ditutup | Sampai kedaluwarsa, atau sampai peramban ditutup untuk cookie sesi |
| 3. Dikirim ke server | Tidak | Tidak | Ya, otomatis di setiap permintaan |
| 4. Cakupan | Semua tab dari asal yang sama | Satu tab dari asal yang sama | Domain dan jalur yang cocok |
| 5. Akses JavaScript | Ya | Ya | Ya, kecuali diberi atribut HttpOnly |
| 6. Dibuat oleh server | Tidak, hanya lewat skrip | Tidak, hanya lewat skrip | Ya, lewat header respons |
| 7. Atribut keamanan | Tidak ada | Tidak ada | Secure, HttpOnly, SameSite, dan lainnya |
Dari tabel ini terlihat pola besarnya: dua yang pertama adalah penyimpanan lokal di sisi klien, sedangkan cookies adalah jembatan antara peramban dan server.
Contoh Kode Local Storage dan Session Storage
Keduanya memakai perintah yang sama. Untuk local storage:
// Menyimpan data
localStorage.setItem("tema", "gelap");
// Membaca data
const tema = localStorage.getItem("tema");
console.log(tema); // "gelap"
// Menghapus satu kunci
localStorage.removeItem("tema");
// Menghapus semua data milik situs ini
localStorage.clear();
Untuk session storage, cukup ganti objeknya:
sessionStorage.setItem("langkahForm", "2");
const langkah = sessionStorage.getItem("langkahForm");
Menyimpan objek dengan JSON
Karena nilai hanya berupa string, objek dan array harus diubah dulu menjadi JSON:
const pengaturan = { bahasa: "id", ukuranFont: 16 };
localStorage.setItem("pengaturan", JSON.stringify(pengaturan));
const tersimpan = JSON.parse(localStorage.getItem("pengaturan"));
console.log(tersimpan.bahasa); // "id"
Jika kunci belum ada, getItem mengembalikan null. Selalu periksa nilainya sebelum dipakai.
Menangani kegagalan
Penyimpanan bisa gagal, misalnya karena kuota penuh atau pengaturan privasi peramban. Bungkus dengan try dan catch:
try {
localStorage.setItem("kunci", "nilai");
} catch (galat) {
console.error("Penyimpanan gagal:", galat);
}
Mendengarkan perubahan dari tab lain
Event storage aktif di tab lain saat local storage berubah, sehingga beberapa tab bisa saling sinkron:
window.addEventListener("storage", (e) => {
console.log("Berubah:", e.key, e.newValue);
});
Event ini tidak aktif di tab yang melakukan perubahan, hanya di tab lain dari situs yang sama.
Contoh Kode Cookies
Membuat cookie lewat JavaScript
document.cookie = "tema=gelap; max-age=31536000; path=/; SameSite=Lax";
Nilai max-age ditulis dalam detik. Angka 31536000 setara dengan satu tahun. Tanpa max-age atau expires, cookie menjadi cookie sesi.
Membaca cookie
Properti document.cookie mengembalikan semua cookie sebagai satu teks panjang, sehingga perlu dipecah:
function ambilCookie(nama) {
const pasangan = document.cookie
.split("; ")
.find((baris) => baris.startsWith(nama + "="));
return pasangan ? decodeURIComponent(pasangan.split("=")[1]) : null;
}
console.log(ambilCookie("tema")); // "gelap"
Menghapus cookie
document.cookie = "tema=; max-age=0; path=/";
Penghapusan hanya berhasil jika path dan domain sama dengan saat cookie dibuat.
Membuat cookie dari server
Server mengatur cookie lewat header respons. Contoh untuk cookie sesi yang aman:
Set-Cookie: sesi=abc123; Max-Age=3600; Path=/; Secure; HttpOnly; SameSite=Lax
- Secure: cookie hanya dikirim lewat HTTPS.
- HttpOnly: cookie tidak bisa dibaca oleh JavaScript, sehingga lebih aman dari pencurian lewat XSS.
- SameSite: membatasi pengiriman cookie pada permintaan lintas situs. Pilihannya Strict, Lax, atau None, dan None mensyaratkan Secure.
- Max-Age dan Expires: menentukan kapan cookie kedaluwarsa.
Keamanan: Apa yang Boleh dan Tidak Boleh Disimpan?
Aturan utamanya: apa pun yang bisa dibaca JavaScript juga bisa dibaca oleh skrip jahat yang berhasil masuk ke halamanmu lewat serangan XSS. Local storage dan session storage selalu bisa dibaca JavaScript. Panduan keamanannya dibahas di HTML5 Security Cheat Sheet dari OWASP.
| Jenis data | Saran |
|---|---|
| Preferensi tampilan (tema, bahasa, ukuran huruf) | Aman di local storage |
| Draf form atau langkah sementara | Aman di session storage |
| Pengenal sesi login | Gunakan cookie dengan HttpOnly, Secure, dan SameSite |
| Token akses, kata sandi, data kartu, data pribadi sensitif | Jangan simpan di local atau session storage |
| Data yang harus dipercaya, seperti harga atau hak akses | Jangan percaya data klien. Validasi selalu di server |
Cookies juga punya risiko sendiri. Karena dikirim otomatis, cookies rentan terhadap serangan CSRF, yaitu permintaan palsu yang memanfaatkan sesi login pengguna. Atribut SameSite dan token anti-CSRF membantu mengurangi risikonya. Panduan lengkapnya ada di Session Management Cheat Sheet dari OWASP.
Catatan tentang privasi
Cookies, terutama untuk pelacakan, berkaitan dengan peraturan perlindungan data pribadi seperti UU Pelindungan Data Pribadi di Indonesia dan GDPR di Eropa. Jika situsmu memakai cookies untuk analitik atau iklan, pelajari kewajiban persetujuan pengguna. Ini informasi umum, bukan nasihat hukum, jadi konsultasikan dengan ahli hukum untuk kasus nyata.
Kapan Memakai Local Storage, Session Storage, atau Cookies?
| Kebutuhan | Pilihan yang cocok | Alasan |
|---|---|---|
| Menyimpan tema gelap atau terang | Local storage | Perlu bertahan lama dan tidak perlu ke server |
| Draf form multi-langkah dalam satu tab | Session storage | Hanya relevan selama tab terbuka |
| Menjaga pengguna tetap login | Cookie HttpOnly dan Secure | Server perlu mengenali sesi dan JavaScript tidak boleh membacanya |
| Menyimpan preferensi bahasa yang dibaca server | Cookies | Server perlu mengetahuinya saat menyusun halaman |
| Menyimpan keranjang belanja sementara | Local storage atau server | Perlu bertahan, tetapi data penting sebaiknya disimpan di server |
| Mencatat persetujuan pengguna terhadap cookies | Cookies | Biasanya perlu dibaca di sisi server juga |
| Menyimpan data besar atau terstruktur | IndexedDB | Kapasitas lebih besar dan mendukung pencarian |
Alternatif Lain di Luar Tiga Pilihan Ini
- IndexedDB. Basis data di peramban untuk data besar dan terstruktur, dengan API asinkron.
- Cache API dan service worker. Untuk menyimpan respons jaringan agar aplikasi bisa bekerja tanpa koneksi.
- Variabel di memori. Untuk data yang hanya dibutuhkan selama halaman terbuka.
- Penyimpanan di server. Untuk data penting yang harus tersedia di banyak perangkat dan tidak boleh hilang.
Data di sisi klien tidak bisa dijamin permanen. Pengguna bisa menghapusnya, mode privat membersihkannya, dan sebagian peramban membatasi umur data yang ditulis lewat JavaScript. Jadi jangan menjadikannya satu-satunya tempat penyimpanan data penting.
Cara Melihat dan Menghapus Data di DevTools
- Buka DevTools dengan tombol F12 atau klik kanan lalu pilih Inspect.
- Buka tab Application pada Chrome dan Edge, atau tab Storage pada Firefox.
- Pilih kategorinya: Local storage, Session storage, atau Cookies, lalu pilih situs yang ingin diperiksa.
- Lihat daftar kunci dan nilainya, beserta atribut seperti HttpOnly dan SameSite pada cookies.
- Edit atau hapus entri langsung dari tabel, atau gunakan opsi untuk membersihkan semuanya.
Kebiasaan ini sangat membantu saat debugging, misalnya untuk memastikan data tersimpan atau menguji perilaku aplikasi saat datanya kosong.
Kesalahan Umum Pemula
- Menyimpan token login di local storage. Skrip jahat bisa membacanya jika ada celah XSS.
- Lupa mengubah objek menjadi JSON, sehingga yang tersimpan hanya teks “[object Object]”.
- Mengira data local storage ikut terkirim ke server. Tidak. Hanya cookies yang dikirim otomatis.
- Menyimpan data penting hanya di sisi klien. Data bisa hilang kapan saja.
- Menaruh terlalu banyak data di cookies. Setiap permintaan ikut membawanya dan memperlambat halaman.
- Tidak memberi atribut keamanan pada cookie sesi. Padahal HttpOnly, Secure, dan SameSite sangat penting.
- Tidak menangani kegagalan penyimpanan. Kuota penuh atau mode privat bisa membuat penulisan gagal.
- Mengasumsikan sessionStorage dibagi antar tab. Setiap tab punya sendiri.
Mitos seputar Local Storage dan Cookies
- “Local storage lebih aman daripada cookies.” Tidak otomatis. Cookie HttpOnly justru tidak bisa dibaca JavaScript, sedangkan local storage selalu bisa.
- “Cookies sudah usang dan tidak dipakai lagi.” Masih sangat dipakai, terutama untuk sesi login.
- “Data local storage terenkripsi.” Tidak. Datanya disimpan apa adanya dan bisa dilihat di DevTools.
- “Session storage hilang saat halaman dimuat ulang.” Tidak. Ia baru hilang saat tab ditutup.
- “Semua situs bisa membaca local storage-ku.” Tidak. Datanya terikat pada asal masing-masing.
- “Kapasitas local storage tak terbatas.” Ada batas, sekitar beberapa megabita per asal.
Untuk panduan ngoding web lainnya, kunjungi NgodingDaily. Jika kamu masih membangun dasar, baca juga tips memahami logika pemrograman bagi pemula.
Pertanyaan tentang Local Storage, Session Storage, dan Cookies
Apa perbedaan local storage dan session storage?
Local storage menyimpan data sampai dihapus dan dibagi ke semua tab dari situs yang sama. Session storage hanya hidup selama tab terbuka dan terpisah di setiap tab.
Apa perbedaan local storage dan cookies?
Local storage tidak dikirim ke server dan berkapasitas lebih besar. Cookies dikirim otomatis di setiap permintaan, berukuran kecil, dan punya atribut keamanan.
Berapa kapasitas local storage?
Umumnya sekitar 5 MB per asal, tetapi bervariasi antar peramban. Cookies jauh lebih kecil, sekitar 4 KB per cookie.
Apakah local storage aman untuk menyimpan token login?
Tidak disarankan. JavaScript bisa membacanya, sehingga celah XSS dapat mencuri token. Gunakan cookie HttpOnly, Secure, dan SameSite untuk sesi login.
Kapan data session storage hilang?
Saat tab atau jendela ditutup. Data tetap ada saat halaman dimuat ulang.
Apakah cookies dikirim ke server?
Ya. Peramban menyertakan cookies yang cocok secara otomatis di setiap permintaan ke domain tersebut.
Apakah local storage bisa diakses situs lain?
Tidak. Datanya terikat pada asal, yaitu kombinasi protokol, domain, dan port.
Apa itu cookie HttpOnly?
Cookie yang tidak bisa dibaca oleh JavaScript, sehingga melindungi dari pencurian lewat serangan XSS.
Mana yang sebaiknya dipakai untuk menyimpan tema gelap?
Local storage, karena datanya perlu bertahan lama dan tidak perlu dikirim ke server.
Kesimpulan
Local storage, session storage, dan cookies punya peran berbeda. Local storage menyimpan data lama di peramban, session storage menyimpan data sementara per tab, dan cookies membawa data kecil ke server di setiap permintaan. Pilih berdasarkan masa hidup data, kebutuhan server, dan tingkat sensitivitasnya. Jangan menyimpan data sensitif di tempat yang bisa dibaca JavaScript, gunakan atribut keamanan pada cookies, dan jangan menjadikan data klien satu-satunya sumber kebenaran. Dengan pemahaman ini, aplikasi webmu lebih rapi, cepat, dan aman.
One Reply to “Local Storage, Session Storage, Cookies: 7 Perbedaan”