您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

Html5 web本地存儲(chǔ)實(shí)例詳解

2016/12/30 9:41:35來(lái)源：互聯(lián)網(wǎng)

Web Storage是HTML5引入的一個(gè)特別很是緊張的功能，可以在客戶(hù)端本地存儲(chǔ)數(shù)據(jù)，類(lèi)似HTML4的cookie，但可實(shí)現(xiàn)功能要比cookie壯大的多，cookie大小被限定在4KB，Web Storage官方建議為每個(gè)網(wǎng)站5MB。

Web Storage又分為兩種：

sessionStorage

localStorage

從字面意思就可以很清楚的看出來(lái)，sessionStorage將數(shù)據(jù)保存在session中，欣賞器關(guān)閉也就沒(méi)了；而localStorage則一向?qū)?shù)據(jù)保存在客戶(hù)端本地；

不管是sessionStorage，照舊localStorage，可使用的API都雷同，常用的有如下幾個(gè)（以localStorage為例）：

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

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

接下來(lái)，我們通過(guò)Web Storage開(kāi)發(fā)一個(gè)簡(jiǎn)單的通信錄小程序，以演示相干API的使用方法；我們要實(shí)現(xiàn)如下功能：

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

首先先寫(xiě)一個(gè)簡(jiǎn)單的html代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPEHTML>    
  2. <html>    
  3. <head>    
  4. <metacharsetmetacharset="utf-8"/>    
  5. <title>HTML5本地存儲(chǔ)之WebStorage篇</title>    
  6. </head>    
  7. <body>  
  8. <divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;">  
  9. <labelforlabelfor="user_name">姓名：</label>  
  10. <inputtypeinputtype="text"id="user_name"name="user_name"class="text"/>  
  11. <br/>  
  12. <labelforlabelfor="mobilephone">手機(jī)：</label>  
  13. <inputtypeinputtype="text"id="mobilephone"name="mobilephone"/>  
  14. <br/>  
  15. <inputtypeinputtype="button"onclick="save()"value="新增記錄"/>  
  16. <hr/>  
  17. <labelforlabelfor="search_phone">輸入手機(jī)號(hào)：</label>  
  18. <inputtypeinputtype="text"id="search_phone"name="search_phone"/>  
  19. <inputtypeinputtype="button"onclick="find()"value="查找機(jī)主"/>  
  20. <pidpid="find_result"><br/></p>  
  21. </div>  
  22. <br/>  
  23. <dividdivid="list">  
  24. </div>  
  25. </body>  
  26. </html>  

寫(xiě)完頁(yè)面的話，展示結(jié)果差不多就是如下圖：

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. functionsave(){   
  2. varmobilephone=document.getElementById("mobilephone").value;   
  3. varuser_name=document.getElementById("user_name").value;   
  4. localStorage.setItem(mobilephone,user_name);   
  5. } //用于保存數(shù)據(jù)  

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. //查找數(shù)據(jù)   
  2. functionfind(){   
  3. varsearch_phone=document.getElementById("search_phone").value;   
  4. varname=localStorage.getItem(search_phone);   
  5. varfind_result=document.getElementById("find_result");   
  6. find_result.innerHTML=search_phone+"的機(jī)主是："+name;   
  7. }  

要顯現(xiàn)所有已保存的聯(lián)系人信息，則必要使用localStorage.key(index)方法，如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. //將所有存儲(chǔ)在localStorage中的對(duì)象提掏出來(lái)，并顯現(xiàn)到界面上   
  2. functionloadAll(){   
  3. varlist=document.getElementById("list");   
  4. if(localStorage.length>0){   
  5. varresult="<tableborder='1'>";   
  6. result+="<tr><td>姓名</td><td>手機(jī)號(hào)碼</td></tr>";   
  7. for(vari=0;i<localStorage.length;i++){   
  8. varmobilephone=localStorage.key(i);   
  9. varname=localStorage.getItem(mobilephone);   
  10. result+="<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";   
  11. }   
  12. result+="</table>";   
  13. list.innerHTML=result;   
  14. }else{   
  15. list.innerHTML="目前數(shù)據(jù)為空，趕快開(kāi)始加入聯(lián)系人吧";   
  16. }   
  17. }  

結(jié)果如下：

題目：如上的演示，都只有2個(gè)字段，姓名和手機(jī)號(hào)碼，假如要存入更為雄厚的聯(lián)系人信息，比如公司名稱(chēng)、家庭地址等，如何實(shí)現(xiàn)呢？Web Storage不是只能處理字符串嗎？此時(shí)，可以行使JSON的stringify()方法，將復(fù)雜對(duì)象變化成字符串，存入Web Storage中；當(dāng)從Web Storage中讀取時(shí)，可以通過(guò)JSON的parse()方法再轉(zhuǎn)換成JSON對(duì)象；

如下簡(jiǎn)單演示增長(zhǎng)了公司屬性的聯(lián)系人保存JS代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. //保存數(shù)據(jù)    
  2. functionsave(){   
  3. varcontact=newObject;   
  4. contact.user_name=document.getElementById("user_name").value;   
  5. contact.mobilephone=document.getElementById("mobilephone").value;   
  6. contact.company=document.getElementById("company").value;   
  7. varstr=JSON.stringify(contact);   
  8. localStorage.setItem(contact.mobilephone,str);   
  9. loadAll();   
  10. }   
  11. //將所有存儲(chǔ)在localStorage中的對(duì)象提掏出來(lái)，并顯現(xiàn)到界面上   
  12. functionloadAll(){   
  13. varlist=document.getElementById("list");   
  14. if(localStorage.length>0){   
  15. varresult="<tableborder='1'>";   
  16. result+="<tr><td>姓名</td><td>手機(jī)</td><td>公司</td></tr>";   
  17. for(vari=0;i<localStorage.length;i++){   
  18. varmobilephone=localStorage.key(i);   
  19. varstr=localStorage.getItem(mobilephone);   
  20. varcontact=JSON.parse(str);   
  21. result+="<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";   
  22. }   
  23. result+="</table>";   
  24. list.innerHTML=result;   
  25. }else{   
  26. list.innerHTML="目前數(shù)據(jù)為空，趕快開(kāi)始加入聯(lián)系人吧";   
  27. }   
  28. }  

結(jié)果如下：

以上所述是小編給大家介紹的Html5 web本地存儲(chǔ)實(shí)例詳解，盼望對(duì)大家有所幫助，假如大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也特別很是感謝大家對(duì)圖趣網(wǎng)網(wǎng)站的支持！

[教程作者：佚名]
關(guān)鍵詞：本地 存儲(chǔ) 實(shí)例 詳解
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://pkvc.cn/tutorial/wd3362.html
Html5元素及基本語(yǔ)法詳解
淺談Html5中視頻 音頻標(biāo)簽 進(jìn)度條的題目
圖趣網(wǎng)微信
建議反饋
×