[ad_1]
Selamat datang Sob di suratpembaca.web.id. Siang ini kita akan mengupas tentang Linux yaitu Simpan di lokalPenyimpanan di React
.
Semoga artikel mengenai Simpan di lokalPenyimpanan di React
dapat memberikan manfaat bagi Sahabat semua. Mari baca postingan ini
sampai tuntas.
pengantar
Saat mengembangkan aplikasi ringan – kami mungkin ingin menyimpan beberapa data. Jika database terlalu banyak – ada alternatif yang bagus: localStorage!
Meskipun tidak menggantikan database untuk tujuan database, ini berfungsi sebagai sistem penyimpanan berbasis file sederhana yang dapat Anda gunakan untuk menyimpan titik data yang mudah diakses.
Pada artikel ini, kita akan belajar cara menggunakannya
localStorageUntuk dengan mudah menyimpan data di browser Anda. Data ini disimpan sebagai Pasangan nilai kunci Yang dapat dengan mudah dipulihkan oleh pengguna.
Simpan data ke localStorage Sangat mudah di Bereaksi:
const [data, setData] = useState([]);
useEffect(() =>
localStorage.setItem('dataKey', JSON.stringify(data));
, [data]);
Jika Anda tidak terburu-buru dan ingin tahu lebih banyak tentang cara kerjanya, teruslah membaca!
Apa Lokasi penyimpanan?
localStorage Adalah objek penyimpanan web yang memungkinkan pengembang untuk menyimpan Pasangan nilai kunci Di browser web, ini memastikan bahwa data ini tetap ada di semua pembacaan halaman, bahkan ketika pengguna menutup atau memulai ulang browser – dan tidak memiliki tanggal kedaluwarsa. Pasangan nilai kunci yang disimpan dapat berisi semua jenis data – array, objek, string, angka, dan banyak lagi.
Namun, ini tidak dapat menggantikan peran database di situs web dan aplikasi web Anda, karena data hilang saat pengguna menghapus cache browser dan memori lokal – pada akhirnya, Penyimpanan lokal Dan harus digunakan seperti itu. Namun, ada situasi yang dapat dimanfaatkan pengguna localStorageseperti implementasi mode gelap atribut, kegigihan nilai input formulir pengguna, dan banyak lagi.
localStorage Ini memiliki metode bawaan yang memungkinkan kita mengakses objek penyimpanan browser. Contohnya adalah ini setItem() Metode yang memungkinkan kita untuk menambahkan kunci dan nilai ke dalamnya localStorage, sehingga memungkinkan kita untuk menyimpan data. Metode lain yang digunakan untuk pemulihan data – getItem()Hapus data – removeItem()Hapus semuanya localStorage Barang – clear()Dll.
Penyimpanan data di Lokasi penyimpanan Dengan setItem() metode
Pada setItem() Metode ini memungkinkan kita untuk menyimpan nilai dari tipe data apa pun di dalamnya localStorage Dengan menetapkan nilai ke kunci, menghasilkan a Pasangan nilai kunci. Kunci ini digunakan untuk mengambil nilai yang relevan setiap kali kita ingin mengambilnya localStorage.
Catatan: Untuk menyimpan data di localStoragepertama kita perlu mengubahnya menjadi string JSON dengan menggunakan JSON.stringify() Fungsi. Dan ketika kami ingin mengambilnya, kami mengurai data menggunakan itu JSON.parse()mengonversi string JSON menjadi a objek JSON.
Kami sering menggunakannya saat bekerja dengan data di React kait Untuk membantu kami menyimpan/memeliharanya. Hooks juga dapat membantu kami memutuskan tempat untuk mengunggah data tersebut. Ini juga tentang localStorage Karena kita akan menggunakannya useState() Dan useEffect() Kait Kait ini sangat penting karena useState() Hook digunakan untuk menyimpan dan mengatur data, sedangkan dari useEffect() Hook diaktifkan secara default setelah rendering pertama dan setiap kali status berubah sebagai parameter kedua.
Setelah menjelaskan dasar-dasarnya, berikut adalah kode yang kami gunakan untuk menyimpan data localStorage:
const [data, setData] = useState([]);
useEffect(() =>
localStorage.setItem('dataKey', JSON.stringify(data));
, [data]);
Kami pertama-tama membuat status untuk menampung data yang ingin kami simpan localStoragedan kemudian kami telah membuat useEffect() Hook, melewati status sebagai parameter kedua. Dengan begitu, setiap kali keadaan berubah, data di localStorage Ini akan diperbarui ke nilai saat ini.
Kami mengelola fungsi utama yang digunakan untuk membantu kami menyimpan data secara internal useEffect() Kait:
localStorage.setItem('dataKey', JSON.stringify(data));
Hasil
Dalam artikel ini, kita belajar bagaimana menggunakan React hook untuk menyimpan data di React dengan menggunakannya localStorage. Seperti yang dikatakan sebelumnya, ini tidak akan pernah menggantikan peran database, tetapi ini akan membantu kami menyimpan beberapa data terkait pengguna yang dapat meningkatkan antarmuka pengguna, tetapi tidak seharusnya tetap independen dari browser.
Itu tadi artikel tentang Simpan di lokalPenyimpanan di React
, terimakasih telah berkunjung di website saya, mudah-mudahan artikelnya ada manfaatnya ya.
[ad_2]
Source link
