H5的web本地存儲怎么使用-創(chuàng)新互聯(lián)

H5的web本地存儲怎么使用？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純热?，讓我們一起來看看吧?/p>

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都做網站、網站設計、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的臨江網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

Web Storage是HTML5引入的一個非常重要的功能，可以在客戶端本地存儲數(shù)據(jù)，類似HTML4的cookie，但可實現(xiàn)功能要比cookie強大的多，cookie大小被限制在4KB，Web Storage官方建議為每個網站5MB。

Web Storage又分為兩種：

sessionStorage

localStorage

從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關閉也就沒了；而localStorage則一直將數(shù)據(jù)保存在客戶端本地；

不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

保存數(shù)據(jù)：localStorage.setItem(key,value);讀取數(shù)據(jù)：localStorage.getItem(key);刪除單個數(shù)據(jù)：localStorage.removeItem(key);刪除所有數(shù)據(jù)：localStorage.clear();得到某個索引的key：localStorage.key(index);

如上，key和value都必須為字符串，換言之，web Storage的API只能操作字符串。

接下來，我們通過Web Storage開發(fā)一個簡單的通訊錄小程序，以演示相關API的使用方法；我們要實現(xiàn)如下功能：

錄入聯(lián)系人，聯(lián)系人有姓名、手機號碼2個字段，以手機號作為key存入localStorage；根據(jù)手機號碼，查找機主；列出當前已保存的所有聯(lián)系人信息；

首先先寫一個簡單的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>

要實現(xiàn)聯(lián)系人的保存，只需要簡單實現(xiàn)如下JS方法即可：

functionsave(){   
varmobilephone=document.getElementById("mobilephone").value;   
varuser_name=document.getElementById("user_name").value;   
localStorage.setItem(mobilephone,user_name);   
} //用于保存數(shù)據(jù)

要實現(xiàn)查找機主，則實現(xiàn)如下JS方法：

//查找數(shù)據(jù)   
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;   
}

感謝各位的閱讀！看完上述內容，你們對H5的web本地存儲怎么使用大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注創(chuàng)新互聯(lián)網站制作公司行業(yè)資訊頻道。

本文標題：H5的web本地存儲怎么使用-創(chuàng)新互聯(lián)
網站路徑：http://jinyejixie.com/article22/csppjc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、企業(yè)網站制作、企業(yè)建站、動態(tài)網站、營銷型網站建設、手機網站建設

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

H5的web本地存儲怎么使用-創(chuàng)新互聯(lián)