欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Html5 web本地存儲實例詳解

  發(fā)布時間：2016-07-28 16:08:36   作者：佚名   我要評論
這篇文章主要介紹了Html5 web本地存儲實例詳解的相關(guān)資料,需要的朋友可以參考下

Web Storage是HTML5引入的一個非常重要的功能，可以在客戶端本地存儲數(shù)據(jù)，類似HTML4的cookie，但可實現(xiàn)功能要比cookie強(qiáng)大的多，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)如下功能：

首先先寫一個簡單的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">手機(jī)：</label>  
  13. <inputtypeinputtype="text"id="mobilephone"name="mobilephone"/>  
  14. <br/>  
  15. <inputtypeinputtype="button"onclick="save()"value="新增記錄"/>  
  16. <hr/>  
  17. <labelforlabelfor="search_phone">輸入手機(jī)號：</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à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)查找機(jī)主，則實現(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. //將所有存儲在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>手機(jī)號碼</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個字段，姓名和手機(jī)號碼，如果要存入更為豐富的聯(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>手機(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ù)為空，趕緊開始添加聯(lián)系人吧";   
  27. }   
  28. }  

效果如下：

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

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及
    2025-04-21

  • HTML5表格語法格式詳解

    在HTML語法中，表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧
    2025-04-21

  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實現(xiàn)自動換行的網(wǎng)格布局，感興趣的朋友一起看看吧
    2025-04-21

  • 基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標(biāo)注出對應(yīng)的
    2025-03-11

  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性（data-*）提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11

  • HTML5中下拉框＜select＞標(biāo)簽的屬性和樣式詳解

    在HTML5中，下拉框（<select>標(biāo)簽）作為表單的重要組成部分，為用戶提供了一個從預(yù)定義選項中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式，并重點介
    2025-02-27

  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器，感興趣的朋友一起看
    2025-02-17

  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖
    2025-02-17

  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)（link、visited、hover、active）的CSS樣
    2025-02-17

  • HTML5使用details標(biāo)簽：展開/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用，這個不用js即可實現(xiàn)展開/收縮信息，很方便用來讓用戶先才答案，然后下面點擊再給出答案的效果，這里就為大家簡單介紹一下，
    2024-11-03

最新評論