這次帶給大家H5的web本地儲存如何使用，怎麼使用H5的web本地儲存？ H5的web本地儲存所使用的注意事項有哪些，以下就是實戰案例，一起來看一下。
Web Storage是HTML5引入的一個非常重要的功能，可以在客戶端本地存儲數據，類似HTML4的cookie，但可實現功能要比cookie強大的多，cookie大小被限制在4KB，Web Storage官方建議為每個網站5MB。
Web Storage又分為兩種：
sessionStorage
localStorage
從字面上就可以很清楚的看出來，sessionStorage將資料保存在session中，瀏覽器關閉也就沒了；而localStorage則一直將資料保存在客戶端本地；
不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有以下幾個（以localStorage為例）：
儲存資料：localStorage.setItem(key,value);讀取資料：localStorage.getItem(key);刪除單一資料：localStorage.removeItem( key);刪除所有資料：localStorage.clear();得到某個索引的key：localStorage.key(index);
如上，key和value都必須為字串，換言之，web Storage的API只能操作字串。
接下來，我們透過Web Storage開發一個簡單的通訊錄小程序，以演示相關API的使用方法；我們要實現如下功能：
輸入聯絡人，聯絡人有姓名、手機號碼2個字段，以手機號碼存入localStorage；根據手機號碼，查找機主；列出目前已儲存的所有聯絡人資訊；
首先先寫一個簡單的html代碼
<!DOCTYPEHTML> <html> <head> <metacharsetmetacharset="utf-8"/> <title>H5本地存储之WebStorage篇</title> </head> <body> <divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;"> <labelforlabelfor="user_name">姓名：</label> <inputtypeinputtype="text"id="user_name"name="user_name"class="text"/> <br/> <labelforlabelfor="mobilephone">手机：</label> <inputtypeinputtype="text"id="mobilephone"name="mobilephone"/> <br/> <inputtypeinputtype="button"onclick="save()"value="新增记录"/> <hr/> <labelforlabelfor="search_phone">输入手机号：</label> <inputtypeinputtype="text"id="search_phone"name="search_phone"/> <inputtypeinputtype="button"onclick="find()"value="查找机主"/> <pidpid="find_result"><br/></p> </div> <br/> <dividdivid="list"> </div> </body> </html>
要實現聯絡人的保存，只需要簡單實作如下JS方法即可：
functionsave(){
varmobilephone=document.getElementById("mobilephone").value;
varuser_name=document.getElementById("user_name").value;
localStorage.setItem(mobilephone,user_name);
} //用于保存数据要實現查找機主，則實作如下JS方法：
//查找数据
functionfind(){
varsearch_phone=document.getElementById("search_phone").value;
varname=localStorage.getItem(search_phone);
varfind_result=document.getElementById("find_result");
find_result.innerHTML=search_phone+"的机主是："+name;
}相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
H5中如何使用postMessage實作兩個網頁間傳遞資料
以上是H5的web本地儲存如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
