這次帶給大家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中文網其他相關文章!