API yang disebut Penyimpanan Web menyediakan dua mekanisme dasar untuk menyimpan informasi di browser pengguna. sessionStorage dan localStorage
sessionStorage (yang tidak akan kita bahas dalam artikel ini), bekerja sangat mirip dengan localStorage, tetapi dengan satu perbedaan. itu menyimpan data yang disimpan hanya sampai akhir sesi pengguna, mis. e. hingga browser pengguna ditutup, termasuk memuat ulang atau memulihkan halaman
Foto oleh Markus Spiske di Unsplash
Penyimpanan lokal menyimpan data yang disimpan meskipun browser ditutup dan dibuka kembali. Ini membuatnya lebih mudah untuk membuat beberapa perilaku antarmuka selama penggunaan pengguna. Dan jelas, tentu saja, ini bukan untuk menyimpan data sensitif
Struktur penyimpanan datanya cukup sederhana, terdiri dari key-value pair. Sebuah contoh
{key: value
}
Untuk bekerja dengan data ini, pada dasarnya Anda dapat melakukan 4 tindakan, menggunakan 4 metode
- localStorage.setItem() untuk membuat key-value pair baru
- localStorage.getItem()_ untuk mengambil nilai kunci
- localStorage.removeItem()_ untuk menghapus pasangan tertentu
- localStorage.clear() menghapus SEMUA pasangan tersimpan untuk domain tersebut
Ada metode yang disebut key(). Tapi saya tidak akan membicarakannya di sini untuk menyederhanakan penjelasannya
Untuk melihat semua data yang disimpan di penyimpanan lokal browser Anda, cukup periksa halaman, klik tab Aplikasi, lalu, di sidebar, klik Penyimpanan Lokal (jalur menggunakan Chrome atau browser yang menggunakan mesin Chromium)
Menyimpan data. penyimpanan lokal. setItem( )
Metode ini memungkinkan Anda untuk menyimpan nilai di dalam penyimpanan lokal di browser pengguna
Buka konsol di browser Anda dan jalankan perintah berikut
localStorage.setItem("name", "Jack Sparrow");_Sekarang buka tab Application, pergi ke tempat localStorages disimpan dan klik “http. //medium. com". Anda akan melihat nama kami. "Jack Sparrow" disimpan
Catatan. Perhatikan bahwa nilainya akan selalu berupa string. Oleh karena itu, data yang akan disimpan di sana perlu diubah menjadi string sebelum disimpan. Untuk melakukannya, cukup gunakan metode JSON.stringify()_ sebelum meneruskan nilai ke setItem()
Sekarang setelah kami menyimpan nilai di browser pengguna, sekarang kami akan mengambilnya menggunakan metode localStorage.setItem("name", "Jack Sparrow");0
Bekerja seperti setItem() , kita akan menggunakan getItem() untuk mengambil nilai kunci yang disimpan sebelumnya. Dalam kasus kita, kita akan menggunakannya untuk mendapatkan kunci nama yang kita simpan di contoh setItem( ).
Jalankan perintah berikut di konsol Anda untuk melihat nilai yang tersimpan
localStorage.getItem("name");Menghapus data. penyimpanan lokal. hapusItem( )Setelah kita tidak lagi menggunakan data ini, sebaiknya hapus dari localStorage untuk menghindari penumpukan data yang tidak perlu
Metode localStorage.setItem("name", "Jack Sparrow");1 akan menghapus kunci yang Anda atur. Jika kuncinya tidak ada, itu tidak akan melakukan apa-apa
Metode localStorage.setItem("name", "Jack Sparrow");1 hanya menghapus kunci (atau objek) yang Anda minta. Metode localStorage.setItem("name", "Jack Sparrow");3 menghapus SEMUA kunci di domain Anda. Anda tidak perlu melewati parameter apa pun
Jalankan perintah berikut di konsol Anda untuk menghapus pasangan dan kemudian buka tab aplikasi untuk melihat apakah itu dihapus
localStorage.removeItem("name");Perhatian, keamanan, dan batasan- Jangan gunakan localStorage untuk menyimpan data sensitif
- Data yang disimpan tidak memiliki lapisan perlindungan akses, artinya semua data yang disimpan di sana dapat diakses dengan kode apa pun di halaman Anda
- Di browser apa pun, penyimpanan lokal dibatasi hanya untuk menyimpan data sebesar 5Mb
- Penggunaan localStorage bersifat sinkron, mis. e. setiap eksekusi hanya dilakukan satu demi satu
- Anda hanya dapat menggunakan string di penyimpanan lokal, dan ini menyebalkan, karena membatasi penyimpanan data yang lebih kompleks
- Tidak dapat digunakan oleh pekerja web. Ini berarti bahwa jika Anda ingin melakukan aplikasi yang lebih kompleks, menggunakan pemrosesan latar belakang untuk meningkatkan kinerja, Anda tidak dapat menggunakan localStorage karena tidak tersedia
Jadi idealnya Anda harus menggunakan localStorage untuk situasi di mana Anda ingin menyimpan data yang bersifat publik, yang tidak sensitif, yang tidak akan digunakan di aplikasi yang lebih kompleks, yang tidak lebih besar dari 5 MB, dan itu adalah string.
Untuk hal-hal UI sederhana, di mana tidak masuk akal untuk menyimpan sesuatu di database atau di tempat yang lebih permanen, sebaiknya gunakan localStorage
Jika Anda membuat SPA atau situs/sistem apa pun dan menginginkan sedikit kebebasan dari server, penggunaan penyimpanan lokal sudah memadai dan menghabiskan banyak tenaga
Sekian untuk hari ini. Saya harap artikel ini membantu Anda dalam perjalanan pengembangan web Anda
Terima kasih sudah membaca. Ikuti saya di platform ini untuk membaca lebih banyak konten pengembang
Semoga harimu menyenangkan, sampai jumpa lagi. 👋
Menjadi dapat disusun. Buat aplikasi lebih cepat seperti LegoBit adalah alat sumber terbuka untuk membuat aplikasi dengan cara modular dan kolaboratif. Jadikan komposisi untuk mengirim lebih cepat, lebih konsisten, dan mudah diskalakan
→ Pelajari lebih lanjut
Buat aplikasi, halaman, pengalaman pengguna, dan UI sebagai komponen mandiri. Gunakan mereka untuk menyusun aplikasi dan pengalaman baru dengan lebih cepat. Bawa kerangka kerja dan alat apa pun ke dalam alur kerja Anda. Bagikan, gunakan kembali, dan berkolaborasi untuk membangun bersama