濮阳杆衣贸易有限公司

主頁 > 知識庫 > Html5 web本地存儲實例詳解

Html5 web本地存儲實例詳解
熱門標簽：飛亞外呼系統(tǒng) 電話機器人如何 西寧智能外呼系統(tǒng)加盟 百應(yīng)電銷機器人產(chǎn)業(yè) 電視購物電銷外呼系統(tǒng) 杭州營銷電銷機器人供應(yīng)商 貸款電銷人工和機器人哪個好 高德地圖標注賓館位置 聯(lián)通400電話申請

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

Web Storage又分為兩種：

sessionStorage

localStorage

從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉也就沒了；而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ā)一個簡單的通訊錄小程序，以演示相關(guān)API的使用方法；我們要實現(xiàn)如下功能：

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

首先先寫一個簡單的html代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPEHTML>    
  2. <html>    
  3. <head>    
  4. <metacharsetmetacharset="utf-8"/>    
  5. <title>HTML5本地存儲之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">手機：</label>  
  13. <inputtypeinputtype="text"id="mobilephone"name="mobilephone"/>  
  14. <br/>  
  15. <inputtypeinputtype="button"onclick="save()"value="新增記錄"/>  
  16. <hr/>  
  17. <labelforlabelfor="search_phone">輸入手機號：</label>  
  18. <inputtypeinputtype="text"id="search_phone"name="search_phone"/>  
  19. <inputtypeinputtype="button"onclick="find()"value="查找機主"/>  
  20. <pidpid="find_result"><br/></p>  
  21. </div>  
  22. <br/>  
  23. <dividdivid="list">  
  24. </div>  
  25. </body>  
  26. </html>  

寫完頁面的話，展示效果差不多就是如下圖：

要實現(xiàn)聯(lián)系人的保存，只需要簡單實現(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ù)  

要實現(xiàn)查找機主，則實現(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+"的機主是："+name;   
  7. }  

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. //將所有存儲在localStorage中的對象提取出來，并展現(xiàn)到界面上   
  2. functionloadAll(){   
  3. varlist=document.getElementById("list");   
  4. if(localStorage.length>0){   
  5. varresult="<tableborder='1'>";   
  6. result+="<tr><td>姓名</td><td>手機號碼</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ù)為空，趕緊開始加入聯(lián)系人吧";   
  16. }   
  17. }  

效果如下：

問題：如上的演示，都只有2個字段，姓名和手機號碼，如果要存入更為豐富的聯(lián)系人信息，比如公司名稱、家庭地址等，如何實現(xiàn)呢？Web Storage不是只能處理字符串嗎？此時，可以利用JSON的stringify()方法，將復(fù)雜對象轉(zhuǎn)變成字符串，存入Web Storage中；當(dāng)從Web Storage中讀取時，可以通過JSON的parse()方法再轉(zhuǎn)換成JSON對象；

如下簡單演示增加了公司屬性的聯(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. //將所有存儲在localStorage中的對象提取出來，并展現(xiàn)到界面上   
  12. functionloadAll(){   
  13. varlist=document.getElementById("list");   
  14. if(localStorage.length>0){   
  15. varresult="<tableborder='1'>";   
  16. result+="<tr><td>姓名</td><td>手機</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ù)為空，趕緊開始加入聯(lián)系人吧";   
  27. }   
  28. }  

效果如下：

以上所述是小編給大家介紹的Html5 web本地存儲實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

標簽：牡丹江 晉中 安慶 邯鄲 撫州 玉溪 煙臺 內(nèi)蒙古

巨人網(wǎng)絡(luò)通訊聲明：本文標題《Html5 web本地存儲實例詳解》，本文關(guān)鍵詞  Html5,web,本地,存儲,實例,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Html5 web本地存儲實例詳解》相關(guān)的同類信息！
  • 本頁收集關(guān)于Html5 web本地存儲實例詳解的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章
    文登市| 香港| 商河县| 天峨县| 永丰县| 黄石市| 金门县| 拜城县| 绵阳市| 许昌市| 长阳| 道孚县| 邮箱| 阜南县| 石屏县| 瑞安市| 新密市| 琼海市| 陕西省| 中超| 鹤壁市| 三明市| 济南市| 都昌县| 泸溪县| 桐柏县| 朝阳市| 鲜城| 孟连| 景宁| 漯河市| 永康市| 察隅县| 东莞市| 故城县| 广灵县| 桦川县| 襄樊市| 南岸区| 犍为县| 澄城县|