localStorage vs sessionStorage

API Penyimpanan Web menyediakan dua penyimpanan pasangan kunci-nilai di sisi klien: localStorage (tetap ada di antara sesi) dan sessionStorage (dihapus saat tab ditutup). Keduanya menyimpan nilai teks dan dapat diakses secara sinkron melalui JavaScript pada asal yang sama.

Data dalam localStorage tetap ada sampai dihapus secara eksplisit oleh kode, pengguna, atau penghapusan data browser. Data tetap ada setelah browser dimulai ulang, halaman dimuat ulang, dan tab ditutup. Kapasitas biasanya 5–10MB per asal, bergantung pada browser.

sessionStorage berlaku untuk tab dan sesi browser saat ini. Data tetap ada setelah halaman dimuat ulang dalam tab yang sama, tetapi dihapus saat tab ditutup. Dua tab yang membuka situs yang sama memiliki sessionStorage terpisah dan terisolasi—keduanya tidak berbagi data.

Kedua penyimpanan memiliki API yang sama: setItem(key, value), getItem(key), removeItem(key), clear(), dan properti length. Kode yang sama dapat digunakan untuk keduanya—cukup ganti localStorage dengan sessionStorage dan sebaliknya.

Gunakan localStorage untuk: preferensi pengguna (tema, bahasa), respons API yang disimpan dalam cache, dan fungsi "ingat saya". Gunakan sessionStorage untuk: status langkah panduan/formulir, keranjang belanja sementara sebelum pembayaran, dan data yang tidak boleh tetap ada di antara kunjungan karena alasan privasi.

Kedua penyimpanan dibatasi secara ketat berdasarkan asal (protokol + host + port). https://example.com tidak dapat membaca localStorage yang ditetapkan oleh http://example.com. Ini adalah batas keamanan—subdomain juga merupakan asal yang terpisah, kecuali document.domain dimanipulasi (sudah usang).

Keduanya memiliki batas sekitar 5MB per asal di sebagian besar browser. Jika batas terlampaui, akan muncul QuotaExceededError. Kebutuhan penyimpanan data berukuran besar memerlukan IndexedDB, yang mendukung data terstruktur hingga gigabita. Penyimpanan Web ditujukan untuk pasangan kunci-nilai kecil, bukan blob biner atau kumpulan data besar.

Pembacaan dan penulisan Penyimpanan Web bersifat sinkron dan memblokir utas utama. Untuk pembacaan atau penulisan berukuran besar, hal ini dapat menyebabkan halaman tersendat. Pilih IndexedDB untuk operasi data besar yang sering dilakukan. Jaga agar nilai Penyimpanan Web tetap kecil dan jarang ditulis untuk menghindari masalah kinerja.

Penyimpanan Web hanya menyimpan teks. Serialisasikan objek dengan JSON.stringify(); deserialisasikan dengan JSON.parse(). Tangani kegagalan penguraian: try { return JSON.parse(stored) } catch { return defaultValue }. Nilai yang rusak atau bukan JSON dalam penyimpanan akan menimbulkan kesalahan penguraian.

localStorage dalam mode privat/penyamaran dihapus saat semua jendela privat ditutup—perilakunya seperti sessionStorage. Kode yang mengandalkan localStorage untuk status autentikasi harus menangani kondisi ketika localStorage terhapus secara tidak terduga.

Browser semakin membatasi akses penyimpanan pihak ketiga. Bingkai tersemat dari third-party.com pada first-party.com tidak dapat mengakses localStorage milik third-party.com. ITP dari Safari dan Enhanced Tracking Protection dari Firefox mempartisi penyimpanan—penggunaan pihak pertama tidak terpengaruh.

Kapan sessionStorage dihapus?

localStorage tetap ada tanpa batas waktu hingga dihapus secara terprogram atau oleh pengguna; sessionStorage dihapus saat tab ditutup. Keduanya merupakan penyimpanan pasangan kunci-nilai berbasis teks yang sinkron dan dibatasi berdasarkan asal, dengan kapasitas sekitar 5MB. Gunakan localStorage untuk preferensi dan status persisten; gunakan sessionStorage untuk status sementara yang berlaku dalam sesi dan tidak boleh tetap ada setelah tab ditutup.