首頁  >  文章  >  web前端  >  H5的web本地儲存如何使用

H5的web本地儲存如何使用

php中世界最好的语言
php中世界最好的语言原創
2018-01-10 09:54:482417瀏覽

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

相關閱讀:

12個冷門的H5設計小技巧

H5中​​如何使用postMessage實作兩個網頁間傳遞資料

H5怎麼用畫出五角星

以上是H5的web本地儲存如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn