Dapatkah javascript mengakses penyimpanan lokal?

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

Masing-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

Kode 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

Keluaran

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

Keluaran 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

Bagaimana cara menyimpan penyimpanan lokal di JavaScript?

Apa penyimpanan lokal di JavaScript?

Apakah penyimpanan lokal JavaScript aman?