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

H5的web本地儲存如何使用

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

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