LocalStorage, SessionStorage, dan Cookies: Di Mana Harus Menyimpan Data?

Mengingat Data Pengunjung di Sisi Klien (Frontend)

Saat pengunjung memilih "Dark Mode" di website-mu, lalu mereka menutup tab browser dan membukanya lagi besok, website-mu tetap berada di mode gelap. Bagaimana browser mengingat pengaturan tersebut tanpa perlu menyimpannya di Database Server? Jawabannya ada di Web Storage.

Terdapat tiga penyimpanan utama di dalam Browser: LocalStorage, SessionStorage, dan Cookies. Semuanya memiliki fungsi yang spesifik.

1. LocalStorage (Penyimpanan Abadi)

Sesuai namanya, LocalStorage menyimpan data di memori *Hard Disk* perangkat pengguna secara permanen (hingga pengguna menghapusnya secara manual lewat pengaturan Clear Browsing Data).

• Kapasitas: Sangat besar (hingga 5MB - 10MB).
• Sifat: Data tidak akan hilang meskipun browser ditutup (di-close) atau laptop di-restart.
• Cocok untuk: Menyimpan preferensi non-sensitif (seperti status theme: 'dark', volume video otomatis, atau riwayat keranjang belanja sementara).
• Bahaya: Jangan PERNAH menyimpan Token Rahasia (seperti JWT Access Token) di sini, karena sangat mudah dicuri oleh peretas lewat serangan XSS!

2. SessionStorage (Penyimpanan Sekali Pakai)

SessionStorage memiliki cara kerja (sintaks) yang persis sama dengan LocalStorage, tapi umurnya sangat pendek.

• Kapasitas: Sekitar 5MB.
• Sifat: Data hanya hidup selama Tab Browser tersebut terbuka. Begitu pengunjung mengeklik tanda 'X' untuk menutup Tab halamanmu, semua data di SessionStorage akan langsung menguap dan terhapus otomatis!
• Cocok untuk: Menyimpan data *form* multi-halaman (Wizard Form) agar isian *user* tidak hilang saat pindah langkah 1 ke langkah 2, atau untuk menyimpan skor sementara di aplikasi *Game Web*.

3. Cookies (Kurir Pesan Backend)

Cookies adalah penyimpanan paling tua di internet dan cara kerjanya berbeda. Cookies bukan cuma dibaca oleh Frontend (Browser), tapi juga secara otomatis dikirimkan ke Server Backend setiap kali ada request API.

• Kapasitas: Sangat kecil (Maksimal 4 Kilobytes).
• Sifat: Bisa diatur kapan waktu kedaluwarsanya (Expired Date).
• Cocok untuk: Menyimpan Status Login (Session ID atau Refresh Token JWT).
• Kekuatan Super: Backend bisa menyetel Cookie menjadi HttpOnly. Artinya, Cookie itu akan masuk ke memori Browser, TAPI JavaScript Frontend tidak bisa membaca atau menyentuhnya sama sekali! Ini adalah solusi paling aman untuk mencegah Token Login-mu dicuri oleh *hacker*.