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個字段，以手機號作為key存入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;   
}

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

本文標題：H5的web本地存儲怎么使用-創新互聯
網站路徑：http://www.yijiale78.com/article22/csppjc.html

成都網站建設公司_創新互聯，為您提供微信公眾號、企業網站制作、企業建站、動態網站、營銷型網站建設、手機網站建設

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

猜你還喜歡下面的內容

99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

H5的web本地存儲怎么使用-創新互聯