這篇文章主要介紹了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影片教學！
