cookie儲存使用者登入名和密碼程式碼例項

admin發表於2017-04-12
Cookie密碼

本章節分享一段程式碼例項，它實現了利用cookie儲存使用者名稱和密碼的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function setCookie(name, value, iDay) {
  var oDate = new Date();
  //用來設定過期時間用的，獲取當前時間加上傳進來的iDay就是過期時間
  oDate.setDate(oDate.getDate() + iDay); 
  document.cookie = name + '=' + value + ';expires=' + oDate;
};
function getCookie(name) {
  //多個cookie值是以; 分隔的，用split把cookie分割開並賦值給陣列
  var arr = document.cookie.split('; ');
  //歷遍陣列
  for (var i = 0; i < arr[i].length; i++) {
    //原來割好的陣列是：user=simon，再用split('=')分割成：user simon 這樣可以通過arr2[0] arr2[1]來分別獲取user和simon
    var arr2 = arr[i].split('=');
    //如果陣列的屬性名等於傳進來的name  
    if (arr2[0] == name) {
      //就返回屬性名對應的值
      return arr2[1]; 
    }
    //沒找到就返回空
    return ''; 
  }
};
function removeCookie(name) {
  //-1就是告訴系統已經過期，系統就會立刻去刪除cookie
  setCookie(name, 1, -1); 
};
window.onload = function () {
  var form = document.getElementById('form');
  var user = document.getElementsByName('user')[0];
  form.onsubmit = function () {
    setCookie('user', user.value, 14);
  };
  user.value = getCookie('user');
};
</script>
</head>
<body>
<form id="form">
  姓名：<input type="text" name="user" />
  密碼：<input type="password" name="pass" />
        <input type="submit" value="登入" />
</form>
</body>
</html>

相關文章