Local Storage, Session Storage, dan Cookies di JavaScript
Dalam pengembangan aplikasi web modern, penyimpanan data di sisi klien (client-side) menjadi kebutuhan penting untuk meningkatkan pengalaman pengguna. JavaScript menyediakan beberapa mekanisme penyimpanan lokal yang dapat digunakan oleh pengembang, yaitu Local Storage, Session Storage, dan Cookies. Ketiga mekanisme ini memiliki fungsi yang mirip, namun masing-masing memiliki karakteristik dan kegunaan yang berbeda. Artikel ini akan membahas perbedaan serta penggunaan masing-masing jenis penyimpanan tersebut.
1. Local Storage
Pengertian
Local Storage adalah fitur dari Web Storage API yang memungkinkan penyimpanan data secara lokal di browser pengguna tanpa batas waktu kedaluwarsa. Data akan tetap tersimpan bahkan setelah pengguna menutup atau me-restart browser.
Karakteristik
- Kapasitas penyimpanan relatif besar (sekitar 5–10 MB tergantung browser).
- Data bertahan secara permanen hingga dihapus oleh JavaScript atau pengguna.
- Hanya dapat diakses dari domain yang sama.
Contoh Penggunaan
// Menyimpan data
localStorage.setItem("nama", "Nevin");
// Mengambil data
const nama = localStorage.getItem("nama");
// Menghapus data
localStorage.removeItem("nama");
// Menghapus semua data
localStorage.clear();
2. Session Storage
Pengertian
Session Storage juga merupakan bagian dari Web Storage API, tetapi berbeda dengan Local Storage dalam hal waktu hidup data. Data yang disimpan di Session Storage hanya bertahan selama sesi browser masih aktif.
Karakteristik
- Kapasitas serupa dengan Local Storage.
- Data akan hilang ketika tab atau jendela browser ditutup.
- Terpisah untuk setiap tab atau jendela (tidak saling berbagi antar tab).
Contoh Penggunaan
// Menyimpan data
sessionStorage.setItem("statusLogin", "true");
// Mengambil data
const status = sessionStorage.getItem("statusLogin");
// Menghapus data
sessionStorage.removeItem("statusLogin");
// Menghapus semua data
sessionStorage.clear();
3. Cookies
Pengertian
Cookies adalah mekanisme penyimpanan data yang sudah ada sejak awal perkembangan web. Cookies digunakan untuk menyimpan data kecil yang dapat dikirim bersama setiap permintaan HTTP ke server, seperti informasi login atau preferensi pengguna.
Karakteristik
- Kapasitas sangat kecil (sekitar 4 KB).
- Dapat diatur waktu kedaluwarsanya.
- Dikirim ke server setiap kali permintaan dibuat.
- Dapat diakses baik oleh JavaScript maupun server.
Contoh Penggunaan
// Menyimpan cookie
document.cookie = "username=Nevin; expires=Fri, 31 Dec 2025 23:59:59 UTC; path=/";
// Membaca cookie
console.log(document.cookie);
// Menghapus cookie (dengan mengatur tanggal kedaluwarsa ke masa lalu)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
Perbandingan Tabel
| Fitur | Local Storage | Session Storage | Cookies |
|---|---|---|---|
| Kapasitas | ~5-10 MB | ~5-10 MB | ~4 KB |
| Masa berlaku | Permanen | Selama sesi aktif | Dapat ditentukan |
| Akses ke server | Tidak | Tidak | Ya |
| Dukungan domain | Sama | Sama | Dapat lintas subdomain |
| Kemudahan penggunaan | Mudah | Mudah | Agak rumit |
Kesimpulan
Memilih jenis penyimpanan lokal yang tepat tergantung pada kebutuhan aplikasi:
- Gunakan Local Storage untuk data yang perlu disimpan secara permanen di browser.
- Gunakan Session Storage untuk data yang hanya relevan selama sesi pengguna.
- Gunakan Cookies untuk data yang perlu dikirim ke server bersama setiap permintaan HTTP, seperti token autentikasi atau preferensi pengguna lintas sesi.
Dengan memahami perbedaan dan penggunaan masing-masing jenis penyimpanan ini, pengembang dapat membangun aplikasi web yang lebih efisien dan ramah pengguna.
