這篇文章給大家分享的是有關(guān)html5中如何使用localStorage實(shí)現(xiàn)記住密碼功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的建昌網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：

• localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)

• sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞，這使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。

對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問(wèn)其自身的數(shù)據(jù)。

HTML5 使用 JavaScript 來(lái)存儲(chǔ)和訪問(wèn)數(shù)據(jù)。

localStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。

    
    
    


    form{
        width: 300px;
        padding: 10px 0px 20px 30px;
        height:auto;
        border-radius: 6px;
        border-left:8px solid #19a049;
        background:#eee;
        margin:100px auto;
    }
    #user,#pass{
        padding: 8px;
        outline: none;
        background: transparent;
        border:1px solid #999;
        margin-top: 5px;
    }
    #sub{
        padding: 6px;
        outline: none;
        border:none;
        background: #19a049;
        color:#fff;
        width: 150px;
        border-radius: 6px;
        cursor: pointer;
    }


    
        
Log in
        
        
        


        
    


    $(document).ready(function(){

        var strName = localStorage.getItem('keyName');
        var strPass = localStorage.getItem('keyPass');
        if(strName){
            $('#user').val(strName);
        }if(strPass){
            $('#pass').val(strPass);
        }

    });

    function loginBtn_click(){
            var strName = $('#user').val();
            var strPass = $('#pass').val();
            localStorage.setItem('keyName',strName);
            if($('#remember').is(':checked')){
                localStorage.setItem('keyPass',strPass);
            }else{
                localStorage.removeItem('keyPass');
            }
        }

感謝各位的閱讀！關(guān)于“html5中如何使用localStorage實(shí)現(xiàn)記住密碼功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)名稱：html5中如何使用localStorage實(shí)現(xiàn)記住密碼功能-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://weahome.cn/article/ddphie.html