Pengantar
Saat mengembangkan aplikasi ringan – kami mungkin ingin menyimpan beberapa data. Jika database berlebihan – ada alternatif yang bagus: localStorage!
Meskipun tidak menggantikan database untuk tujuan database, ini berfungsi sebagai sistem penyimpanan berbasis file sederhana yang dapat Anda manfaatkan untuk menyimpan titik data yang mudah diakses.
Pada artikel ini, kita akan mempelajari cara menggunakan
localStorageuntuk dengan mudah menyimpan data di browser kita. Data ini disimpan sebagai pasangan kunci-nilai bahwa pengguna dapat dengan mudah mengambil.
Menyimpan data ke localStorage di Bereaksi sangat mudah:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Jika Anda tidak terburu-buru dan ingin mempelajari lebih lanjut tentang cara kerjanya, teruslah membaca!
Apa itu penyimpanan lokal?
localStorage adalah objek penyimpanan web yang memungkinkan pengembang untuk menyimpan pasangan kunci-nilai di browser web dan memastikan bahwa data ini bertahan dari semua penyegaran halaman, bahkan ketika pengguna menutup atau memulai ulang browser – dan tidak memiliki tanggal kedaluwarsa. Pasangan nilai kunci yang disimpan dapat mencakup semua jenis data – array, objek, string, angka, dan banyak lainnya.
Namun, ini tidak dapat menggantikan peran basis data di situs web dan aplikasi web Anda karena data hilang saat pengguna mengosongkan cache browser dan penyimpanan lokal – akhirnya, penyimpanan lokal dan harus digunakan seperti itu. Meskipun demikian, ada situasi di mana pengguna dapat menggunakan localStorage, seperti menerapkan mode gelap fitur, mempertahankan nilai input formulir pengguna, dan banyak lainnya.
localStorage memiliki metode bawaan yang memungkinkan kita mengakses objek penyimpanan browser. Salah satu contohnya adalah setItem() metode, yang memungkinkan kita untuk menambahkan kunci dan nilai ke localStorage, sehingga memungkinkan kami untuk menyimpan data. Metode lain yang digunakan untuk mengambil data - getItem(), hapus data- removeItem(), Bersihkan semua localStorage contoh - clear(), Dan sebagainya.
Menyimpan Data ke penyimpanan lokal Dengan setItem() metode
Grafik setItem() metode ini memungkinkan kita untuk menyimpan nilai dari tipe data apa pun ke localStorage dengan menetapkan nilai ke kunci, menghasilkan a pasangan nilai kunci. Kunci ini akan digunakan untuk mengambil nilai yang sesuai kapan pun kita ingin mengambilnya dari localStorage.
Catatan: Untuk menyimpan data di localStorage, kita harus mengubahnya terlebih dahulu menjadi string JSON menggunakan JSON.stringify() fungsi. Dan ketika kami ingin mengambilnya, kami akan mengurai data menggunakan JSON.parse(), mengonversi string JSON kembali ke a objek JSON.
Saat bekerja dengan data di React, kami sering menggunakan kait untuk membantu kami menyimpan/memegangnya. Hooks juga dapat membantu kami menemukan tempat untuk mengunggah data tersebut. Ini juga berlaku untuk localStorage karena kita akan menggunakan useState() dan useEffect() kait. Kait ini sangat penting karena useState() hook digunakan untuk menyimpan dan mengatur data, sedangkan useEffect() hook dipicu secara default setelah render pertama dan setiap kali status dilewatkan saat parameter kedua berubah.
Setelah menjelaskan fondasinya, berikut adalah kode yang akan kita gunakan untuk menyimpan data di localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Kami pertama kali membuat status untuk menyimpan data yang ingin kami simpan di localStorage, dan kemudian kami telah membuat useEffect() hook, meneruskan status sebagai parameter kedua. Dengan begitu, setiap kali keadaan berubah, data di localStorage diperbarui ke nilai saat ini.
Kami menangani fungsi inti, yang digunakan untuk membantu kami dalam penyimpanan data, dalam useEffect() kait:
localStorage.setItem('dataKey', JSON.stringify(data));
Kesimpulan
Dalam artikel ini, kita belajar bagaimana menggunakan React hook untuk menyimpan data di React menggunakan localStorage. Seperti yang dinyatakan sebelumnya, ini tidak akan pernah menggantikan peran database, melainkan akan membantu kami dalam menyimpan beberapa data terkait pengguna yang dapat meningkatkan UI tetapi tidak dimaksudkan untuk dipertahankan secara independen dari browser.
