Ringkasan Web Storage
Browser web modern menyediakan berbagai cara untuk menyimpan data di sisi klien (client-side). Tiga metode yang paling sering digunakan adalah localStorage, sessionStorage, dan Cookies.
1. localStorage
localStorage menyimpan data tanpa batas waktu kadaluarsa (no expiration date). Data akan tetap tersimpan bahkan setelah jendela browser atau komputer ditutup dan dinyalakan kembali.
// Menyimpan item
localStorage.setItem('theme', 'dark');
// Mengambil item
const theme = localStorage.getItem('theme');
// Menghapus item
localStorage.removeItem('theme');
- Kapasitas: ~5MB per origin.
- Aksesibilitas: Hanya dapat diakses dari JavaScript di domain yang sama.
2. sessionStorage
Mirip dengan localStorage, namun data di dalam sessionStorage akan otomatis dihapus saat sesi halaman berakhir (yaitu ketika tab browser ditutup).
// Menyimpan data formulir sementara
sessionStorage.setItem('draft_comment', 'Konten draf...');
3. Cookies (HTTP-Only & Secure)
Cookies adalah mekanisme penyimpanan tertua yang dirancang untuk dikirimkan kembali ke server di setiap HTTP request. Untuk alasan keamanan autentikasi, selalu gunakan atribut HttpOnly dan Secure.
Set-Cookie: session_token=xyz123; Secure; HttpOnly; SameSite=Strict; Path=/
Ringkasan & Rekomendasi
- Gunakan
localStorageuntuk preferensi pengguna yang persisten seperti tema (Light/Dark mode) atau setelan tampilan. - Gunakan
sessionStorageuntuk data wizard multi-langkah atau draf formulir sementara. - Gunakan
HttpOnly Cookiesuntuk menyimpan token autentikasi (JWT / Session IDs) guna mencegah serangan XSS.