探索HTML5本機儲存功能運用技巧

這篇文章主要介紹了HTML5本地儲存功能運用技巧，透過實例可以加深對HTML5本地儲存的理解，熟練應用，有興趣的小伙伴們可以參考一下。

我們來實現一個簡單應用，該應用中用戶輸入用戶名和手機號，相關因襲可以保存到保存到本地，並可以進行查找、展示等基本操作。

以下只給我出關鍵程式碼，專案結構和基本程式碼以及CSS樣式大家可以自己加入。

我們依照功能進行分佈完成。

1、儲存功能

這裡我們要完成，當使用者輸入姓名和手機號碼時，自己的資訊儲存到Web Storage中，html中碼如下：

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

以上代碼是一個表單，用戶輸入姓名和手機號碼後，點擊新增記錄，即可在本地中保存姓名-手機號鍵值對。具體的js中save函數程式碼如下：

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

Save函數的邏輯很簡單，就是取出使用者輸入的值，然後利用localStorage的setItem功能以鍵值對的形式將資訊儲存到Web Storage中。

2、查找功能

查找功能需要實現，當使用者輸入某個電話號碼時，顯示資料庫中對應查找資訊。 HTML程式碼如下：     

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

其中result區域用來放置查詢的結果。以下給出js中find函數的相關程式碼：

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

先取得使用者輸入的手機號，然後利用getItem放大從資料庫取得手機號為這個的使用者名，最後一同顯示在result區域中。

以上兩個是最基本的功能，我們將會繼續探索本地儲存的高階用法，以及如何在行動應用中自如的運用本地儲存功能。更多相關教學請上Html5影片教學！