cookie儲存刪除使用者名稱和密碼程式碼例項

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

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

這樣的操作在實際應用非常的常見，需要的朋友可以做一下參考。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  使用者名稱：<input type="text" value="" id="text" /><br /><br />
  密碼：<input type="password" value="" id="password">
  <a href="javascript:;" id="zC">註冊</a>
  <a href="javascript:;" id="hq">獲取</a>
  <a href="javascript:;" id="del">刪除</a>
</body>
<script type="text/javascript">
var oText = document.getElementById('text'),
          pS = document.getElementById('password'),
          zC = document.getElementById('zC'),
    hQ = document.getElementById('hq'),
    deL = document.getElementById('del');
zC.onclick = function () {//點選註冊
  getCookie(oText.value, pS.value);
}
hQ.onclick = function () {//點選獲取
  alert(document.cookie);
}
deL.onclick = function () {//點選刪除
  var onOff2 = true;
  var arr1 = document.cookie.split('; ');
  for (var i = 0 ; i < arr1.length ; i++) {
    var arr2 = arr1[i].split('=');
    if (arr2[0] == oText.value) {
      removeCookie(oText.value);
      alert("刪除成功！");
      return;
    }
    else {
      onOff2 = false;
    }
  }
  if (!onOff2) {
    alert("此使用者並未註冊過,無法刪除！");
  }
}
//儲存cookie值
function setCookie(key, value, t) { 
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + t);
  document.cookie = key + '=' + encodeURI(value) + ';expires=' + oDate.toGMTString(); alert(encodeURI(key));
}
//獲取cookie值
function getCookie(key, value) { 
  var onOff = true;
  var arr1 = document.cookie.split('; ');
  for (var i = 0 ; i < arr1.length; i++) {
    var arr2 = arr1[i].split('=');
    if (arr2[0] == key) {//使用者名稱
      alert(decodeURI(arr2[0]) + "已註冊過了");
      return;
    }
    else {//註冊
      if (value != '') {
        setCookie(key, value, 10);
      }
      else {
        onOff = false;
      }
    }
  }
  if (onOff == false) {
    alert("請輸入密碼");
  }
}
//刪除cookie值
function removeCookie(key) {
  setCookie(key, '', -1);
}
</script>
</html>

相關文章