Tidak Semua Bisa Kamu Simpan di localStorage, File[] Maksud Saya

Sabtu, 11 Oktober 2025 2 menit baca

Blog

Pada artikel sebelumnya, Saya membahas bahwa Saya memerlukan state management library dengan penyimpanan localStorage.

Saya tahu bahwa perlu untuk menyimpan data yang telah di-input user ke localStorage agar user tidak perlu melakukan input lagi jika user melakukan refresh.

Lucunya Saya sadar memerlukannya saat melakukan cek setelah konfigurasi library.

Tipe data yang harus disimpan bermacam-macam, dari string, array, number, object, sampai File. Saya mengerti bahwa seharusnya ini bukan masalah.

Di TypeScript, tipe int, float dan sejenisnya disebut number

Setelah mengubah konfigurasi, Saya menyadari bahwa tipe data File[] tidak dapat disimpan di localStorage.

Maksud Saya secara teknis bisa.

Kita dapat melakukan for loop pada File[] untuk mengkonversi setiap File yang ada di dalamnya ke Base64. Termasuk mengambil setiap nama, tipe, untuk dapat dikonversi ulang.

Dan Base64 harus dikonversikan ke Blob dahulu sebelum bisa dikonversikan ke File.

Masalahnya adalah, File yang dikonversikan ke Base64 ukurannya dapat membesar sampai 33% karena proses encoding.

Maka jika Saya membuat kolom upload file di halaman dengan maksimal 10MB, ukurannya bisa menjadi 13.3MB.

Sedangkan web browser umumnya membatasi penyimpanan localStorage sekitar 5-10MB per-domain sebelum memunculkan QuotaExceededError jika melebihi.

Jadi yang akan Saya lakukan adalah menyimpan data yang di-input user kecuali yang bertipe File[], dan jika user melakukan refresh, user akan di-redirect ke halaman form, sebelum muncul error bahwa kolom Upload file tidak boleh kosong.

Sebagai penutup, berikut quotes dari Dan Levy:

When you are having trouble getting your thinking straight, consider an extreme or simple case.