webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法

webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)服務(wù)，網(wǎng)站設(shè)計(jì)，網(wǎng)站托管維護(hù)等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競爭對手中脫穎而出成都創(chuàng)新互聯(lián)公司。

1.webStorage是什么？

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

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

Ⅰ.cookie存在的問題：

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

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

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

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

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

過程：

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. function MyClick1()   
{   
}

ⅱ.通過一個(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+的火狐瀏覽器;

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

缺點(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是通過鍵值對的方式存儲;

webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法

②.第二種方式:localStorage

localStorage是Web Storage互聯(lián)網(wǎng)存儲規(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);   
           localStorage.setItem("k_pwd",pwd);

ⅴ.打印

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. alert("保存成功！");

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

第一種方式打印：

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. function MyClick2() {   
                alert(sessionStorage.getItem("k_username"));   
                alert(sessionStorage.getItem("k_pwd"));   
            }

第二種方式打印

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. function MyClick2() {   
            alert(localStorage.getItem("k_username"));   
            alert(localStorage.getItem("k_pwd"))   
           }

結(jié)果顯示:

webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法 webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法

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

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

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

webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法

結(jié)果顯示:

webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法 webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法

ⅷ.localStorage的clear方法

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

結(jié)果顯示:

webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法    webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法

代碼顯示：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.4.1.min.js"></script>
    <script src="js/webSt.js"></script>
    <script type="text/javascript">
        function MyClick1() {   
            //1.獲取到它的用戶名和密碼   
            var username = $("#TxtUserName").val();   
            var pwd = $("#TxtPwd").val();   
            //2.sessionStrage的方式   
            //sessionStorage.setItem("k_username", username);   
            //sessionStorage.setItem("k_pwd", pwd);   
            //第二種方式   
            localStorage.setItem("k_username", username);   
            localStorage.setItem("k_pwd",pwd);   
            //3.打印   
            alert("保存成功！");   
        }   
         function MyClick2() {   
             //4.打印以上   
             //第一種方式   
             //alert(sessionStorage.getItem("k_username"));   
             //alert(sessionStorage.getItem("k_pwd"));   
             //第二種方式打印   
             //如果我想刪除它的用戶名怎么做呢？通過它的key把它刪除,這樣獲取時(shí)就為空   
             //localStorage.removeItem("k_username");   
             //如果我想把所有數(shù)據(jù)都清除？localStorage有個(gè)方法   
             localStorage.clear();   
             alert(localStorage.getItem("k_username"));   
             alert(localStorage.getItem("k_pwd"))   
            }   
    </script>
</head>
<body>
    <table>
        <tr>
            <td>用戶名:</td>
            <td>
                <input type="text" id="TxtUserName" />
            </td>
        </tr>
        <tr>
            <td>密碼:</td>
            <td>
                <input type="password" id="TxtPwd" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="按鈕1" onclick="MyClick1()"/>
            </td>
            <td>
                <input type="button" value="按鈕2"  onclick="MyClick2()"/>
            </td>
        </tr>
    </table>
</body>
</html>

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
    $(function () {   
        //4.頁面刷新之后判斷它是否為空？   
        if (localStorage.getItem("k_showCon") != null) {   
            //5.存在，就把獲取到的內(nèi)容存到里面去   
            "k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));   
        }   
    });   
        function preservationClick()   
        {   
            var sCon = $("#mCon").val();   
            //2.獲取到內(nèi)容之后加到顯示p里去？怎么放呢？這里我們用append方法   
            $("#showCon").append("<p>" + sCon + "</p>");   
            //3.預(yù)期的是刷新之后留言還在   
            localStorage.setItem("k_showCon", $("#showCon").html());   
        }   
        function ClearClick()   
        {   
            //6.獲取到顯示p里面的內(nèi)容清除   
            $("#showCon").html("");   
            localStorage.clear();   
        }   
    </script>
</head>
<body>
    <p>
        <table>
            <tr>
                <td colspan="2">
                    <textarea id="mCon" cols="25" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td><input type="button" value="留言" onclick="preservationClick()" /></td>
                <td><input type="button" value="清除" onclick="ClearClick()" /></td>
            </tr>
        </table>
        <p id="showCon"></p>
    </p>
</body>
</html>

效果顯示:

webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法

webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法

關(guān)于webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

網(wǎng)站欄目：webstorage--html5的本地?cái)?shù)據(jù)處理的使用方法
文章出自：http://m.kartarina.com/article10/jedsdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、微信公眾號、ChatGPT、品牌網(wǎng)站制作、App開發(fā)、面包屑導(dǎo)航

廣告

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

手機(jī)網(wǎng)站建設(shè)
主站蜘蛛池模板： 人妻无码一区二区不卡无码av| 亚洲AⅤ永久无码精品AA| 国产成人AV无码精品| 国内精品久久人妻无码不卡| 亚洲av无码成人精品区在线播放| 国产成人精品无码一区二区三区| 久久久久久国产精品免费无码| 午夜无码熟熟妇丰满人妻| 国产AⅤ无码专区亚洲AV| 亚洲成a人片在线观看天堂无码| 国产成年无码AV片在线韩国| 99久无码中文字幕一本久道| 熟妇无码乱子成人精品| 国产成人亚洲综合无码| 亚洲av成人无码网站…| 精品三级AV无码一区| a级毛片免费全部播放无码| 亚洲毛片无码专区亚洲乱| 亚洲AV无码之日韩精品| 久久久久久亚洲av无码蜜芽| 国产亚洲AV无码AV男人的天堂 | 亚洲中文字幕无码久久2017 | 色窝窝无码一区二区三区成人网站 | 中文字幕av无码无卡免费| 八戒理论片午影院无码爱恋| 精品久久久久久无码中文野结衣| 免费A级毛片av无码| 国产成人无码一区二区三区| 国产日韩AV免费无码一区二区三区| 亚洲欧洲无码一区二区三区| 无码欧精品亚洲日韩一区| 亚洲大尺度无码专区尤物| 亚洲中文字幕无码久久精品1| 自拍中文精品无码| 自拍偷在线精品自拍偷无码专区| 午夜无码中文字幕在线播放| 亚洲av中文无码| 中出人妻中文字幕无码| 国产AV巨作情欲放纵无码| 无码伊人66久久大杳蕉网站谷歌| 无码内射中文字幕岛国片|