HTML5 Penyimpanan Lokal

Penyimpanan Web adalah fitur yang sangat penting yang diperkenalkan oleh HTML5.

Penyimpanan web dibagi menjadi dua jenis:

• StsessionStorage
• OrlocalStorage

Dapat dilihat dengan jelas dari makna literal.

Apakah itu Sesi Sesi, atau LocalStorage, API yang dapat digunakan adalah sama.

• C Simpan data: localstorage.setitem (kunci, nilai);
• C Baca data: localstorage.getItem (key);
• ： Hapus satu data: localstorage.removeitem (kunci);
• L Hapus semua data: localstorage.clear ();
• 索 Kunci untuk mendapatkan indeks tertentu: localstorage.key (index);

Sebagai di atas, baik dan nilainya harus string.

Selanjutnya, kami mengembangkan program alamat kecil sederhana melalui penyimpanan web untuk menunjukkan penggunaan API terkait;

1. Masukkan contact person, kontak memiliki dua bidang, nomor ponsel, dan nomor ponsel digunakan sebagai keystorage sebagai keystorage;

2. Temukan pemilik sesuai dengan nomor ponsel;

3. Sebutkan semua informasi kontak yang saat ini dilestarikan;

Pertama, siapkan halaman HTML sederhana, sebagai berikut:

 <! ; : </Label> <input type = Text ID = MobilePhone Name = MobilePhone/> <br/> <input type = Tombol OnClick = save () value = Rekaman baru/<hr/> <label untuk = searc = searc h_phone> Masukkan nomor telepon seluler: </label> <input type = Text ID = search_phone name = search_phone/> <input type = tombol onClick = find () value = temukan pemilik mesin/> <p id = find_result> <br </s > </p> </div> <br/> <div id = list> </div> </body> </html>

Antarmuka menunjukkan yang berikut:

Untuk mencapai pelestarian kontak, Anda hanya perlu menerapkan metode JS berikut:

 // Simpan Fungsi Data () {var microlephone = document.getElementById (MobilePhone).

Untuk mencapai pemilik pendiri, metode JS berikut diimplementasikan:

 // Temukan fungsi data () {var search_phone = document.geteLementById (search_phone).

Untuk menunjukkan semua informasi kontak yang disimpan, Anda perlu menggunakan metode localstorage.key (indeks), sebagai berikut:

 // Ekstrak semua objek yang disimpan di LocalStorage dan tunjukkan fungsi LoadAll () {var list = document.getElementById (daftar); <l> <td> Nama </td> <td> Nomor ponsel </td> </tr>; i); var name = localstorage.getItem (MobilePhone); .innerHtml = result;} else {list.innerHtml = data saat ini kosong, cepatlah untuk bergabung dengan orang kontak;}}

Efeknya adalah sebagai berikut:

Pertanyaan: Demonstrasi di atas hanya memiliki dua bidang, nama dan nomor ponsel. Bukankah penyimpanan web hanya memproses string? Pada saat ini, Anda dapat menggunakan metode JSON's Stringify () untuk mengubah objek kompleks menjadi string dan menyimpannya di penyimpanan web;

Demonstrasi sederhana berikut menambahkan kontak atribut perusahaan untuk menyimpan kode JS:

 // Simpan Fungsi Data () {Var Contact = Objek baru; JSON.Stringify (kontak); GetElementById (daftar); > <td> <td> <td> Ponsel </td> <td> perusahaan </td> </tr>; localstorage.key (I); > <td>+conf tact.company+</td> </tr>;} result+= </able>; orang kontak;}}

Efeknya adalah sebagai berikut:

Di atas adalah penyimpanan lokal HTML5 yang diperkenalkan oleh Xiaobian. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!