亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

深入剖析webstorage[html5的本地?cái)?shù)據(jù)處理]

  發(fā)布時(shí)間：2016-07-11 09:53:26   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇深入剖析webstorage[html5的本地?cái)?shù)據(jù)處理]。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧，祝大家游戲愉快哦

1.webStorage是什么？

webStorage是html5中用于本地化存儲(chǔ)的一種方式，而在之前呢我們是用cookie的存儲(chǔ)方式處理;

2.那它們之間的區(qū)別是什么？

Ⅰ.cookie存在的問題：

ⅰ.cookie需要向服務(wù)端發(fā)送一個(gè)請(qǐng)求，服務(wù)端返回一個(gè)cookieId，存儲(chǔ)用瀏覽器緩存里,需消耗一定的帶寬。[cookie會(huì)隨著每次HTTP請(qǐng)求頭信息一起發(fā)送，無(wú)形中增加了網(wǎng)絡(luò)流量];

ⅱ.cookie存儲(chǔ)的數(shù)據(jù)容量有限，根據(jù)瀏覽器類型不同而不同，IE6大約只能存儲(chǔ)2K;

Ⅱ.而webstorage只需把數(shù)據(jù)存儲(chǔ)于本地;

3.我們可以舉一個(gè)小例子說(shuō)明一下

eg:輸入用戶名和密碼，點(diǎn)擊按鈕1時(shí)，把數(shù)據(jù)保存起來(lái)，點(diǎn)擊按鈕2，頁(yè)面刷新還可以獲取到；

過程：

ⅰ.創(chuàng)建一個(gè)事件

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. function MyClick1()   
  2. {   
  3. }  
ⅱ.通過一個(gè)id獲取到它的用戶名
JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. var username = $("#TxtUserName").val();  
ⅲ.通過一個(gè)id獲取到它的密碼
JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. var pwd = $("#TxtPwd").val();  

ⅳ.用戶名和密碼獲取到之后，我們要怎么存數(shù)據(jù)呢？有兩種方式：

 ①. 第一種：sessionStorege,使用于Firefox2+的火狐瀏覽器;

生命周期：用這種方式存儲(chǔ)的數(shù)據(jù)僅窗口級(jí)別有效，同一個(gè)窗口（或者Tab）頁(yè)面刷新或者跳轉(zhuǎn)，都能獲取到本地存儲(chǔ)的數(shù)據(jù)，當(dāng)新開窗口或者頁(yè)面時(shí)，原來(lái)的數(shù)據(jù)就失效了[僅限當(dāng)前頁(yè)面]

缺點(diǎn)：IE不支持，不能實(shí)現(xiàn)數(shù)據(jù)的持久保存。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. sessionStorage.setItem("k_username", username);            sessionStorage.setItem("k_pwd", pwd);  

     注：sessionStorage.setItem是通過鍵值對(duì)的方式存儲(chǔ);

          

     ②.第二種方式:localStorage

     localStorage是Web Storage互聯(lián)網(wǎng)存儲(chǔ)規(guī)范中的一部分，現(xiàn)在在Firefox 3.5、Safari 4和IE8中得到支持。

    生命周期：存于本地C盤，瀏覽器關(guān)閉打開之后還有;

     缺點(diǎn)：低版本瀏覽器不支持。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. localStorage.setItem("k_username", username);   
  2.            localStorage.setItem("k_pwd",pwd);  

ⅴ.打印

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. alert("保存成功！");  

ⅵ.按鈕2打印以上所有數(shù)據(jù)

第一種方式打?。?br />

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. function MyClick2() {   
  2.                 alert(sessionStorage.getItem("k_username"));   
  3.                 alert(sessionStorage.getItem("k_pwd"));   
  4.             }  
第二種方式打印
JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. function MyClick2() {   
  2.             alert(localStorage.getItem("k_username"));   
  3.             alert(localStorage.getItem("k_pwd"))   
  4.            }  
結(jié)果顯示:

       

   ⅶ.擴(kuò)展：localStorage的removeItem方法

//如果我想刪除它的用戶名怎么做呢？通過它的key把它刪除,這樣獲取時(shí)就為空             
//localStorage.removeItem("k_username");

   跟蹤本地?cái)?shù)據(jù)情況:

        

   結(jié)果顯示:

    

  ⅷ.localStorage的clear方法

//如果我想把所有數(shù)據(jù)都清除？localStorage有個(gè)方法             
localStorage.clear();

   結(jié)果顯示:

          

 代碼顯示：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script src="js/jquery-1.4.1.min.js"></script>  
  7.     <script src="js/webSt.js"></script>  
  8.     <script type="text/javascript">  
  9.         function MyClick1() {   
  10.             //1.獲取到它的用戶名和密碼   
  11.             var username = $("#TxtUserName").val();   
  12.             var pwd = $("#TxtPwd").val();   
  13.             //2.sessionStrage的方式   
  14.             //sessionStorage.setItem("k_username", username);   
  15.             //sessionStorage.setItem("k_pwd", pwd);   
  16.             //第二種方式   
  17.             localStorage.setItem("k_username", username);   
  18.             localStorage.setItem("k_pwd",pwd);   
  19.             //3.打印   
  20.             alert("保存成功！");   
  21.         }   
  22.          function MyClick2() {   
  23.              //4.打印以上   
  24.              //第一種方式   
  25.              //alert(sessionStorage.getItem("k_username"));   
  26.              //alert(sessionStorage.getItem("k_pwd"));   
  27.              //第二種方式打印   
  28.   
  29.              //如果我想刪除它的用戶名怎么做呢？通過它的key把它刪除,這樣獲取時(shí)就為空   
  30.              //localStorage.removeItem("k_username");   
  31.              //如果我想把所有數(shù)據(jù)都清除？localStorage有個(gè)方法   
  32.              localStorage.clear();   
  33.              alert(localStorage.getItem("k_username"));   
  34.              alert(localStorage.getItem("k_pwd"))   
  35.             }   
  36.     </script>  
  37. </head>  
  38. <body>  
  39.     <table>  
  40.         <tr>  
  41.             <td>用戶名:</td>  
  42.             <td>  
  43.                 <input type="text" id="TxtUserName" />  
  44.             </td>  
  45.         </tr>  
  46.         <tr>  
  47.             <td>密碼:</td>  
  48.             <td>  
  49.                 <input type="password" id="TxtPwd" />  
  50.             </td>  
  51.         </tr>  
  52.         <tr>  
  53.             <td>  
  54.                 <input type="button" value="按鈕1" onclick="MyClick1()"/>  
  55.             </td>  
  56.             <td>  
  57.                 <input type="button" value="按鈕2"  onclick="MyClick2()"/>  
  58.             </td>  
  59.         </tr>  
  60.     </table>    
  61. </body>  
  62. </html>  

4.webStorage制作簡(jiǎn)易留言板[代碼為了展示效果所以把js就直接在html里面寫]

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script src="js/jquery-1.4.1.min.js"></script>  
  7.     <script type="text/javascript">  
  8.     $(function () {   
  9.         //4.頁(yè)面刷新之后判斷它是否為空？   
  10.         if (localStorage.getItem("k_showCon") != null) {   
  11.             //5.存在，就把獲取到的內(nèi)容存到里面去   
  12.             "k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));   
  13.         }   
  14.     });   
  15.         function preservationClick()   
  16.         {   
  17.             var sCon = $("#mCon").val();   
  18.             //2.獲取到內(nèi)容之后加到顯示div里去？怎么放呢？這里我們用append方法   
  19.             $("#showCon").append("<div>" + sCon + "</div>");   
  20.             //3.預(yù)期的是刷新之后留言還在   
  21.             localStorage.setItem("k_showCon", $("#showCon").html());   
  22.         }   
  23.         function ClearClick()   
  24.         {   
  25.             //6.獲取到顯示DIV里面的內(nèi)容清除   
  26.             $("#showCon").html("");   
  27.             localStorage.clear();   
  28.         }   
  29.     </script>  
  30. </head>  
  31. <body>  
  32.     <div>  
  33.         <table>  
  34.             <tr>  
  35.                 <td colspan="2">  
  36.                     <textarea id="mCon" cols="25" rows="10"></textarea>  
  37.                 </td>  
  38.             </tr>  
  39.             <tr>  
  40.                 <td><input type="button" value="留言" onclick="preservationClick()" /></td>  
  41.                 <td><input type="button" value="清除" onclick="ClearClick()" /></td>  
  42.             </tr>  
  43.         </table>  
  44.         <div id="showCon"></div>  
  45.     </div>  
  46. </body>  
  47. </html>  

   效果顯示:

               

                     

以上這篇深入剖析webstorage[html5的本地?cái)?shù)據(jù)處理]就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/wangwangwangMax/p/5634625.html

相關(guān)文章

  • HTML5本地存儲(chǔ)之IndexedDB

    IndexedDB 是一種低級(jí)API，用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)(包括, 文件/ blobs)。下面通過本文重點(diǎn)給大家介紹HTML5本地存儲(chǔ)之IndexedDB的相關(guān)知識(shí)，感興趣的朋友一起看看吧
    2017-06-16

  • html5中l(wèi)ocalStorage本地存儲(chǔ)的簡(jiǎn)單使用

    我們?cè)谧鲰?yè)面時(shí)會(huì)用到本地存儲(chǔ)的時(shí)候，今天說(shuō)說(shuō)localStorage本地存儲(chǔ)。感興趣的朋友一起學(xué)習(xí)吧
    2017-06-16

  • HTML5 LocalStorage 本地存儲(chǔ)刷新值還在

    html5的兩種存儲(chǔ)技術(shù)的最大區(qū)別就是生命周期，接下來(lái)通過本文給大家分享HTML5 LocalStorage 本地存儲(chǔ)刷新值還在問題以及使用方法小結(jié)，需要的的朋友參考下本文吧
    2017-03-10

  • 詳解HTML5 LocalStorage 本地存儲(chǔ)

    本篇文章主要介紹了HTML5 LocalStorage 本地存儲(chǔ) ，HTML5 storage提供了一種方式讓網(wǎng)站能夠把信息存儲(chǔ)到你本地的計(jì)算機(jī)上，并再以后需要的時(shí)候進(jìn)行獲取。有興趣的可以了解
    2016-12-23

  • html5本地存儲(chǔ) localStorage操作使用詳解

    這篇文章主要介紹了html5本地存儲(chǔ) localStorage操作使用詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-09-20

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

    這篇文章主要介紹了Html5 web本地存儲(chǔ)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2016-07-28

  • HTML5本地存儲(chǔ)之Web Storage詳解

    這篇文章主要為大家詳細(xì)介紹了HTML5本地存儲(chǔ)之Web Storage的相關(guān)資料，Web Storage如何用JSON存儲(chǔ)多個(gè)數(shù)據(jù)，感興趣的小伙伴們可以參考一下
    2016-07-04

  • HTML5 本地存儲(chǔ) LocalStorage詳解

    下面小編就為大家?guī)?lái)一篇HTML5 本地存儲(chǔ) LocalStorage詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2016-06-24

  • HTML5本地?cái)?shù)據(jù)庫(kù)基礎(chǔ)操作詳解

    在本地?cái)?shù)據(jù)庫(kù)中我們可以直接利用JavaScript創(chuàng)建數(shù)據(jù)庫(kù)，并利用SQL語(yǔ)句執(zhí)行相關(guān)的數(shù)據(jù)庫(kù)操作。對(duì)于復(fù)雜的數(shù)據(jù)庫(kù)，HTML5使用本地?cái)?shù)據(jù)庫(kù)進(jìn)行操作,需要的朋友可以參考下
    2016-04-26

  • HTML5打開本地app應(yīng)用的方法

    這篇文章主要介紹了HTML5打開本地app應(yīng)用的方法，如果你的手機(jī)上安裝有支付寶，那么在訪問支付寶手機(jī)網(wǎng)頁(yè)時(shí)就會(huì)自動(dòng)打開支付寶app，否則在頁(yè)面上會(huì)提示你進(jìn)行下載app，這是
    2016-03-31

最新評(píng)論