Tutorial Memulai Penyimpanan lokal Html5

Penyimpanan lokal hanya-baca memungkinkan Anda mengakses penyimpanan objek jarak jauh (asal) Dokumen yang disimpan sebagai sesi lintas-browser. localStorage mirip dengan sessionStorage, perbedaannya adalah data yang disimpan di localStorage tidak terbatas, sedangkan data yang disimpan di sessionStorage akan dihapus ketika sesi halaman berakhir - yaitu ketika halaman ditutup.

Jumlah pasangan nilai kunci di Penyimpanan lokal.

 localStorage.length // 0localStorage.setItem('nama', 'mazey')localStorage.length // 1

Tambahkan/perbarui pasangan nilai kunci localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Penyimpanan {usia: 23, nama: mazey, panjang: 2}

Setara dengan:

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // Penyimpanan {usia: 23, nama: mazey, panjang: 2}

Mendapatkan nilai kunci yang ditentukan di Penyimpanan lokal.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.getItem('name') // mazeylocalStorage.getItem('age') // 23localStorage.getItem('sex ') // batal

Setara dengan:

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // mazeylocalStorage['age'] // 23localStorage.sex // tidak terdefinisi

Menghapus pasangan nilai kunci untuk kunci tertentu dari Penyimpanan lokal.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Penyimpanan {usia: 23, nama: mazey, panjang: 2}localStorage.removeItem('age') / / undefinisilocalStorage // {nama: labirin, panjang: 1}localStorage.removeItem('age') // tidak terdefinisi

Hapus semua pasangan nilai kunci di Penyimpanan lokal.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Penyimpanan {usia: 23, nama: mazey, panjang: 2}localStorage.clear()localStorage // Penyimpanan {panjang: 0}

localStorage hanya dapat menyimpan string, jadi nilai kompleks seperti array/objek harus diubah menjadi string menggunakan JSON.stringify() terlebih dahulu, lalu menggunakan JSON.parse() untuk mengubahnya menjadi nilai kompleks sebelum digunakan.

 biarkan arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) ​​​​// [1, 2, 3]

Biarkan jendela memantau penyimpanan Penyimpanan lokal. Ketika Penyimpanan lokal suatu label berubah, label lain akan meresponsnya.

test0.html - Ubah Penyimpanan lokal.

 <input type=text id=input /><button onclick=setNameForStorage()>Set</button><script type=text/javascript> fungsi setNameForStorage () { localStorage.name = document.querySelector('#input'). nilai }</skrip>

test1.html - merespons perubahan Penyimpanan lokal.

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // nama 123 })</script>

1. localStorage hanya dapat digunakan dengan nama domain yang sama, dan dapat digunakan dengan postMessage dan iframe untuk mencapai komunikasi lintas domain.
2. Versi IE yang lebih rendah tidak mendukung Penyimpanan lokal.
3. Ini perlu digunakan di lingkungan server, yaitu tidak dapat digunakan di lingkungan abnormal seperti file://.
4. Masalah yang tidak dapat diprediksi mungkin terjadi pada Penyimpanan lokal seluler (H5, IOS, Android).

Harap Berhenti Menggunakan Penyimpanan Lokal

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.