Membaca dan Menulis localStorage di React

localStorage adalah penyimpanan bawaan peramban dengan empat metode inti: setItem(key, value), getItem(key), removeItem(key), dan clear(). Data tetap ada setelah pemuatan ulang halaman dan peramban dimulai ulang.

Penyimpanan ini tersedia pada objek window dan terpisah untuk setiap asal, sehingga setiap asal memiliki penyimpanan terisolasi sendiri.

Setiap pemanggilan localStorage berjalan secara sinkron pada utas utama. Membaca atau menulis data dalam jumlah besar dapat memblokir perenderan dan membuat antarmuka terasa tersendat.

Karena itu, simpan nilai berukuran kecil dan hindari menulis pada setiap penekanan tombol atau peristiwa pengguliran.

localStorage hanya dapat menyimpan teks. Untuk menyimpan objek atau larik, Anda harus melakukan serialisasi terlebih dahulu dengan JSON.stringify(value) sebelum memanggil setItem.

Jika Anda menyimpan nilai yang bukan teks secara langsung, nilai tersebut akan dikonversi secara paksa, sehingga sebuah objek menjadi teks tidak berguna [object Object].

Saat membaca, Anda memanggil JSON.parse(localStorage.getItem(key)), tetapi penguraian dapat menimbulkan kesalahan jika teks yang tersimpan rusak atau ditulis oleh sumber lain.

Bungkus penguraian dalam try/catch dan gunakan nilai bawaan sebagai cadangan agar entri yang bermasalah tidak membuat komponen Anda mengalami kerusakan.

localStorage tidak selalu dapat digunakan: selama perenderan sisi server, window tidak ada, dan beberapa mode penjelajahan privat menimbulkan kesalahan saat menulis. Lindungi akses dengan pemeriksaan fitur.

Uji yang aman adalah try/catch yang menetapkan lalu menghapus kunci tiruan, dan mengembalikan nilai salah jika terjadi kesalahan.

Sebagian besar peramban membatasi localStorage hingga sekitar lima megabita untuk setiap asal. Jika batas ini terlampaui, penulisan akan memicu QuotaExceededError.

Karena itu, localStorage cocok untuk data kecil, tetapi kurang sesuai untuk gambar, kumpulan data besar, atau respons API yang disimpan sebagai tembolok.

Pilihan yang sesuai adalah bagian kecil dan tidak sensitif dari antarmuka pengguna serta status pengguna: preferensi tema, status bilah sisi yang diciutkan, filter yang terakhir digunakan, banner yang ditutup, dan draf formulir yang belum disimpan.

Nilai-nilai ini perlu tetap ada setelah pemuatan ulang, tetapi tidak memerlukan permintaan bolak-balik ke server.

Hindari menyimpan rahasia seperti token atau kata sandi, karena skrip apa pun di halaman dapat membaca localStorage sehingga rentan terhadap XSS. Hindari juga objek besar dan status server yang menjadi acuan.

Data autentikasi sensitif sebaiknya disimpan dalam cookie httpOnly, sedangkan data acuan sebaiknya berada di server.

Keduanya menggunakan antarmuka yang sama, tetapi sessionStorage dihapus ketika tab ditutup dan tidak dibagikan antartab. localStorage bertahan tanpa batas waktu dan dibagikan ke semua tab dari asal yang sama.

Pilih sessionStorage untuk data berumur pendek yang khusus untuk satu tab, dan localStorage untuk preferensi yang ingin dipertahankan.

Cookie berukuran kecil dan dikirimkan bersama setiap permintaan HTTP, sehingga cocok untuk autentikasi tetapi memboroskan bandwidth jika digunakan untuk data umum. IndexedDB adalah basis data asinkron untuk data besar dan terstruktur, jauh melampaui batas 5MB.

Pilih cookie untuk autentikasi yang dibaca server, localStorage untuk preferensi kecil di klien, dan IndexedDB untuk data besar atau kompleks.

Fungsi pembantu minimal menulis dengan localStorage.setItem(key, JSON.stringify(value)) dan membaca dengan try/catch yang dilindungi di sekitar JSON.parse(localStorage.getItem(key)), lalu mengembalikan nilai bawaan jika terjadi kegagalan.

Pembungkus kecil ini menempatkan serialisasi dan penanganan galat di satu tempat.

Uji pemahaman Anda tentang tipe data localStorage.

Anda telah mempelajari antarmuka localStorage, sifatnya yang sinkron dan hanya menerima teks, batasnya yang mendekati 5MB, serta cara mengurai data dengan aman dan memeriksa ketersediaannya untuk SSR dan mode privat.

Anda juga telah membandingkannya dengan sessionStorage, cookie, dan IndexedDB untuk memilih penyimpanan yang tepat.