Perbedaan Cookies, LocalStorage, dan SessionStorage di Browser

Browser Punya Brankas Rahasia

Pernahkah kamu menambahkan barang ke keranjang belanja Shopee/Tokopedia, lalu kamu menutup tab-nya, dan saat dibuka lagi barangnya masih ada? Itu karena browser memiliki tempat penyimpanan data (Storage) di laptop/HP pengguna. Ada tiga tipe penyimpanan yang paling sering digunakan oleh Frontend Developer.

1. LocalStorage (Penyimpanan Permanen)

LocalStorage adalah gudang berukuran cukup besar (sekitar 5-10 MB) yang datanya tidak akan hilang meskipun browser ditutup atau laptop dimatikan. Data ini hanya akan hilang jika pengguna secara manual menghapusnya (Clear Cache/Data) atau jika kodemu memerintahkannya untuk dihapus.

• Cocok untuk: Menyimpan preferensi pengguna (seperti mode gelap/terang), pengaturan bahasa, atau menyimpan data sementara agar aplikasi bisa jalan saat offline.
• Cara pakai: localStorage.setItem('tema', 'gelap');

2. SessionStorage (Penyimpanan Sekali Pakai)

Mirip dengan LocalStorage, ukurannya juga sekitar 5MB. Namun bedanya, data di SessionStorage akan langsung terhapus begitu tab browser ditutup.

• Cocok untuk: Data yang sifatnya sangat sementara, seperti isian form multi-langkah (wizard) atau data filter pencarian agar tidak membebani memori saat pengguna sudah selesai menggunakan web.
• Cara pakai: sessionStorage.setItem('stepForm', '2');

3. Cookies (Si Kurir Kecil yang Cerewet)

Cookies ukurannya sangat kecil (hanya 4 KB). Berbeda dengan Local dan Session Storage yang datanya hanya diam di browser, Cookies akan selalu dikirimkan (menumpang) secara otomatis ke server setiap kali browser melakukan request (fetch/mengambil data).

• Cocok untuk: Menyimpan Token Autentikasi (menandakan bahwa user tersebut sudah login) atau melacak aktivitas pengguna untuk keperluan analitik/iklan lintas website.
• Karena ukurannya kecil dan selalu membebani bandwidth setiap kali request, jangan pernah menggunakan Cookies untuk menyimpan data besar seperti teks artikel.

Kesimpulan

Jangan pernah menyimpan data yang sangat sensitif (seperti password asli atau nomor kartu kredit) di ketiga penyimpanan ini tanpa enkripsi yang kuat, karena data tersebut sangat mudah dilihat melalui menu Inspect Element > Application oleh siapapun yang meminjam laptop pengguna.