JS使用cookie保存用戶登錄信息操作示例

更新時間：2019年05月30日 10:34:42 作者：常駐客

這篇文章主要介紹了JS使用cookie保存用戶登錄信息操作,結(jié)合具體實例形式分析了javascript使用cookie實現(xiàn)針對用戶信息的存儲與讀取相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了JS使用cookie保存用戶登錄信息。分享給大家供大家參考，具體如下：

通常cookie和session，是web開發(fā)中用于存儲信息的對象，session存在于服務(wù)器的內(nèi)存中，而cookie則是存在客戶端，所以js可以直接操作cookie進行信息的存儲和讀取。

js存放cookie一般的寫法，如：document.cookie="userName=admin";，如果是多個鍵值對：document.cookie="userName=admin; userPass=123";

下面是js操作cookie保存用戶的登錄信息：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script language="javascript" type="text/javascript">
function addCookie(name,value,days,path){  /**添加設(shè)置cookie**/
  var name = escape(name);
  var value = escape(value);
  var expires = new Date();
  expires.setTime(expires.getTime() + days * 3600000 * 24);
  //path=/，表示cookie能在整個網(wǎng)站下使用，path=/temp，表示cookie只能在temp目錄下使用
  path = path == "" ? "" : ";path=" + path;
  //GMT(Greenwich Mean Time)是格林尼治平時，現(xiàn)在的標準時間，協(xié)調(diào)世界時是UTC
  //參數(shù)days只能是數(shù)字型
  var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();
  document.cookie = name + "=" + value + _expires + path;
}
function getCookieValue(name){ /**獲取cookie的值，根據(jù)cookie的鍵獲取值**/
  //用處理字符串的方式查找到key對應(yīng)value
  var name = escape(name);
  //讀cookie屬性，這將返回文檔的所有cookie
  var allcookies = document.cookie;
  //查找名為name的cookie的開始位置
  name += "=";
  var pos = allcookies.indexOf(name);
  //如果找到了具有該名字的cookie，那么提取并使用它的值
  if (pos != -1){                       //如果pos值為-1則說明搜索"version="失敗
    var start = pos + name.length;         //cookie值開始的位置
    var end = allcookies.indexOf(";",start);    //從cookie值開始的位置起搜索第一個";"的位置,即cookie值結(jié)尾的位置
    if (end == -1) end = allcookies.length;    //如果end值為-1說明cookie列表里只有一個cookie
    var value = allcookies.substring(start,end); //提取cookie的值
    return (value);              //對它解碼
  }else{ //搜索失敗，返回空字符串
    return "";
  }
}
function deleteCookie(name,path){  /**根據(jù)cookie的鍵，刪除cookie，其實就是設(shè)置其失效**/
  var name = escape(name);
  var expires = new Date(0);
  path = path == "" ? "" : ";path=" + path;
  document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}
/**實現(xiàn)功能，保存用戶的登錄信息到cookie中。當?shù)卿涰撁姹淮蜷_時，就查詢cookie**/
window.onload = function(){
  var userNameValue = getCookieValue("userName");
  document.getElementById("txtUserName").value = userNameValue;
  var userPassValue = getCookieValue("userPass");
  document.getElementById("txtUserPass").value = userPassValue;
}
function userLogin(){  /**用戶登錄，其中需要判斷是否選擇記住密碼**/
  //簡單驗證一下
  var userName = document.getElementById("txtUserName").value;
  if(userName == ''){
    alert("請輸入用戶名。");
    return;
  }
  var userPass = document.getElementById("txtUserPass").value;
  if(userPass == ''){
    alert("請輸入密碼。");
    return;
  }
  var objChk = document.getElementById("chkRememberPass");
  if(objChk.checked){
    //添加cookie
    addCookie("userName",userName,7,"/");
    addCookie("userPass",userPass,7,"/");
    alert("記住了你的密碼登錄。");
    window.location.;
  }else{
    alert("不記密碼登錄。");
    window.location.;
  }
}
</script>
</head>
<body>
<center>
  <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;">
    <tr>
      <td align="center" colspan="2">歡迎使用XXX管理系統(tǒng)</td>
    </tr>
    <tr>
      <td align="right">
        <label>用戶名：</label>
      </td>
      <td align="left">
        <input type="text" id="txtUserName" name="txtUserName" style="width:160px; margin-left:10px;" />
      </td>
    </tr>
    <tr>
      <td align="right">
        <label>密 碼：</label>
      </td>
      <td align="left">
        <input type="password" id="txtUserPass" name="txtUserPass" style="width:160px; margin-left:10px;" />
      </td>
    </tr>
    <tr>
      <td align="center" colspan="2">
        <span style="font-size:12px; color:blue; vertical-align:middle;">是否記住密碼</span>
        <input type="checkbox" id="chkRememberPass" name="chkRememberPass" style="vertical-align:middle;" />
      </td>
    </tr>
    <tr>
      <td align="center" colspan="2">
        <input type="submit" id="subLogin" name="subLogin" value="登 錄" onclick="userLogin()"/>
        <input type="reset" id="resetLogin" name="resetLogin" value="重 置" />
      </td>
    </tr>
  </table>
</center>
</body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: