Terokai petua untuk menggunakan fungsi storan setempat HTML5

Artikel ini terutamanya memperkenalkan kemahiran aplikasi fungsi storan tempatan HTML5 Melalui contoh, anda boleh mendalami pemahaman anda tentang storan tempatan HTML5 dan menggunakannya dengan mahir.

Mari kita laksanakan aplikasi mudah Dalam aplikasi ini, pengguna memasukkan nama pengguna dan nombor telefon mudah alih, dan rutin yang berkaitan boleh disimpan secara setempat, dan operasi asas seperti carian dan paparan boleh dilakukan.

Hanya kod kunci yang diberikan kepada saya di bawah Anda boleh menambah sendiri struktur projek, kod asas dan gaya CSS.

Kami melengkapkan pengedaran mengikut fungsi.

1. Fungsi Storan

Di sini kita perlu melengkapkan apabila pengguna memasukkan nama dan nombor telefon bimbit mereka, maklumat mereka disimpan dalam Storan Web html adalah seperti berikut:

<form>     
     <labelforlabelforlabelforlabelfor=”username”>姓名：</label>     
     <inputtypeinputtypeinputtypeinputtype=”text” id=”username” name=”username” />     
     <labelforlabelforlabelforlabelfor=”mobilephone”>手机号：</label>     
     <input type=”text” id=”mobilephone”name=”mobilephone” />        
     <input type=”button” onclick=”save()”vale=”新增记录” />     
</form>

Kod di atas ialah borang Selepas pengguna memasukkan nama dan nombor telefon bimbit, klik Tambah Rekod untuk menyimpan pasangan nilai kunci nama-nombor telefon bimbit secara setempat. Kod fungsi simpan khusus dalam js adalah seperti berikut:

function save(){     
     var mobilePhone= document.getElementById(“mobilephone”).value;     
     var userName= dpcument.getElementById(“username”).value;     
     localStorage.setItem(mobilePhone,userName);     
}

Logik fungsi simpan adalah sangat mudah, iaitu untuk mengeluarkan nilai yang dimasukkan oleh pengguna, dan kemudian menggunakan fungsi setItem localStorage untuk menyimpan maklumat dalam bentuk pasangan nilai kunci di tengah Storan Web.

2. Fungsi carian

Fungsi carian perlu dilaksanakan apabila pengguna memasukkan nombor telefon, maklumat carian yang sepadan dalam pangkalan data dipaparkan. Kod HTML adalah seperti berikut:

<label for=”search”>请输入手机号：</label>     
<input type=”text" id=”search”name=”search” />     
<input type=”button” onclick=”find()”value=”查找”>     
<p id=”result”><p>

Kawasan hasil digunakan untuk meletakkan hasil pertanyaan. Berikut ialah kod yang berkaitan untuk fungsi find dalam js:

function find(){     
     var search =document.getElementById(“search”).value;     
     var name = localStorge.gteItem(search);     
     var result =document.getElementById(“result”);     
     result.innerHTML= search + “:” + name;     
}

Mula-mula dapatkan nombor telefon bimbit yang dimasukkan oleh pengguna, kemudian gunakan getItem untuk mengezum masuk untuk mendapatkan nama pengguna dengan nombor telefon bimbit ini daripada pangkalan data, dan akhirnya memaparkannya bersama-sama di tengah kawasan hasil.

Dua di atas adalah fungsi paling asas Kami akan terus meneroka penggunaan lanjutan storan tempatan dan cara menggunakan fungsi storan tempatan secara bebas dalam aplikasi mudah alih. Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial Video Html5!