LocalStorage adalah jenis penyimpanan data penyimpanan web. Ini memungkinkan situs dan aplikasi JavaScript untuk menyimpan dan mengakses data tanpa tanggal kedaluwarsa. Ini berarti bahwa data akan selalu bertahan dan tidak akan kedaluwarsa. Jadi, data yang tersimpan di browser akan tersedia bahkan setelah menutup jendela browser
Singkatnya, yang dapat kami katakan adalah bahwa penyimpanan lokal menyimpan data tanpa tanggal kedaluwarsa, yang tersedia bagi pengguna bahkan setelah jendela browser ditutup. Ini berguna dalam berbagai cara, seperti mengingat data keranjang belanja atau login pengguna di situs web mana pun
Di masa lalu, cookie adalah satu-satunya pilihan untuk mengingat jenis informasi sementara dan lokal ini, tetapi sekarang kami juga memiliki penyimpanan lokal. Penyimpanan lokal hadir dengan batas penyimpanan yang lebih tinggi daripada cookie (5MB vs 4MB). Itu juga tidak dikirim dengan setiap permintaan HTTP. Jadi, ini adalah pilihan yang lebih baik sekarang untuk penyimpanan sisi klien. Beberapa poin penting dari localStorage perlu diperhatikan
- localStorage tidak aman untuk menyimpan data sensitif dan dapat diakses menggunakan kode apapun. Jadi, ini cukup tidak aman
- Ini adalah keunggulan localStorage dibandingkan cookie yang dapat menyimpan lebih banyak data daripada cookie. Anda dapat menyimpan data 5MB di browser menggunakan penyimpanan lokal
- localStorage menyimpan informasi hanya di browser, bukan di database. Dengan demikian localStorage bukanlah pengganti database berbasis server
- localStorage sinkron, yang berarti bahwa setiap operasi dijalankan satu demi satu
Metode Penyimpanan lokal
Penyimpanan lokal menawarkan beberapa metode untuk menggunakannya. Kami akan membahas semua metode penyimpanan lokal ini dengan contoh. Sebelum itu, gambaran dasar dari metode-metode tersebut adalah sebagai berikut
MethodsDescriptionsetItem()Metode ini digunakan untuk menambahkan data melalui key dan value ke localStorage. getItem()Ini digunakan untuk mengambil atau mengambil nilai dari penyimpanan menggunakan kunci. removeItem()Ini menghapus item dari penyimpanan dengan menggunakan kunci. clear() Digunakan untuk menghapus semua penyimpananMasing-masing metode ini digunakan dengan kata kunci localStorage yang terhubung dengan dot(. ) karakter. Misalnya. penyimpanan lokal. setItem()
Berikut beberapa kode yang diberikan, yang digunakan untuk menambah, mengambil, menghapus, dan menghapus data di localStorage. Gunakan mereka dalam kode Anda sesuai kebutuhan kapan pun diperlukan. Anda memerlukan key-value pair untuk menambahkan beberapa data di localStorage. Jadi, misalkan kuncinya adalah kota dan nilainya adalah Noida, i. e. , kunci. nilai = kota. Noida
Tambahkan data
Untuk menambahkan data di localStorage, baik kunci maupun nilai diperlukan untuk meneruskan fungsi setItem()
Ambil data
Hanya membutuhkan kunci untuk mengambil data dari penyimpanan dan variabel JavaScript untuk menyimpan data yang dikembalikan
Hapus data
Itu juga hanya membutuhkan kunci untuk menghapus nilai yang melekat padanya
Hapus penyimpanan lokal
Ini adalah fungsi clear() sederhana dari localStorage, yang digunakan untuk menghapus semua data localStorage
Batasan penyimpanan lokal
Karena localStorage memungkinkan untuk menyimpan data lokal sementara, yang tetap ada bahkan setelah menutup jendela browser, tetapi juga memiliki sedikit batasan. Di bawah ini adalah beberapa batasan penyimpanan lokal yang diberikan
- Jangan simpan informasi sensitif seperti username dan password di localStorage
- localStorage tidak memiliki perlindungan data dan dapat diakses menggunakan kode apa pun. Jadi, ini cukup tidak aman
- Anda hanya dapat menyimpan data maksimal 5MB di browser menggunakan penyimpanan lokal
- localStorage menyimpan informasi hanya di browser bukan di database berbasis server
- localStorage sinkron, yang berarti bahwa setiap operasi dijalankan satu demi satu
Keuntungan penyimpanan lokal
Penyimpanan lokal hadir dengan beberapa keunggulan. Keuntungan pertama dan penting dari localStorage adalah dapat menyimpan data sementara tetapi berguna di browser, yang tetap ada bahkan setelah jendela browser ditutup. Di bawah ini adalah daftar beberapa keuntungan
- Data yang dikumpulkan oleh localStorage disimpan di browser. Anda dapat menyimpan data 5 MB di browser
- Tidak ada tanggal kedaluwarsa data yang disimpan oleh localStorage
- Anda dapat menghapus semua item penyimpanan lokal dengan satu kode baris, mis. e. , jernih()
- Data localStorage tetap ada bahkan setelah jendela browser ditutup, seperti item di keranjang belanja
- Ini juga memiliki keunggulan dibandingkan cookie karena dapat menyimpan lebih banyak data daripada cookie
Kompatibilitas browser
Penyimpanan lokal telah ditentukan dalam HTML 5, yang didukung oleh beberapa browser, seperti Chrome. Di bawah ini adalah daftar berbagai browser dan versinya yang mendukung JavaScript localStorage
BrowserKode JavaScript untuk memeriksa kompatibilitas browser
Dengan bantuan contoh kode di bawah ini, Anda dapat memeriksa kompatibilitas browser. Gunakan kode ini di setiap program localStorage Anda untuk memeriksa kompatibilitas browser sebelum menambahkan atau menghapus sesuatu dari localStorage
Keluaran
Contoh
Ini adalah contoh dasar menambahkan kunci dan nilai ke localStorage dan mengambil kembali dengan kunci. Lihat kode di bawah ini bagaimana metode localStorage bekerja
Uji SekarangKeluaran
Lebih Banyak Contoh
Ini adalah contoh untuk menghitung klik tombol artinya akan menghitung berapa kali pengguna mengklik tombol tersebut. Dalam contoh ini, kita akan membuat dua tombol, satu untuk menghitung klik pengguna dan satu lagi untuk menghapus data klik tersebut
Uji SekarangKeluaran 1
Pada output di bawah ini, Anda dapat melihat bahwa kami telah mengklik tombol Click to Count sebanyak 9 kali
Keluaran 2
Sekarang tutup tab jendela dan buka kembali untuk menjalankan kode lagi. Sekali lagi, klik tombol Click to Count, itu akan mulai menghitung dari 10 di mana Anda pergi
Keluaran 3
Sekarang, klik tombol Hapus Hitungan untuk menghapus data yang disimpan. Ketika Anda mengklik lagi tombol Click to Count, itu akan dimulai lagi dengan 1
Hapus semua catatan
Clear() metode localStorage digunakan untuk menghapus seluruh data penyimpanan. Saat metode ini dipanggil, metode ini menghapus semua catatan untuk domain tersebut dari penyimpanan. Itu tidak mengandung parameter apa pun. Lihat sintaks untuk menghapus penyimpanan lokal
Atau
Kami akan menggunakan kode yang jelas ini dalam contoh di bawah ini
Periksa penyimpanan lokal
Di konsol JavaScript, Anda dapat memeriksa apa yang ada di penyimpanan lokal dengan mengetikkan perintah localStorage di atasnya. Bahkan jika tidak ada apa-apa di penyimpanan lokal, itu memiliki panjang = 0 di dalamnya