怎么在JavaScript中利用cookie保存用戶的登錄信息？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
通常cookie和session，是web開發中用于存儲信息的對象，session存在于服務器的內存中，而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){ /**添加設置cookie**/
var name = escape(name);
var value = escape(value);
var expires = new Date();
expires.setTime(expires.getTime() + days * 3600000 * 24);
//path=/，表示cookie能在整個網站下使用，path=/temp，表示cookie只能在temp目錄下使用
path = path == "" ? "" : ";path=" + path;
//GMT(Greenwich Mean Time)是格林尼治平時，現在的標準時間，協調世界時是UTC
//參數days只能是數字型
var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();
document.cookie = name + "=" + value + _expires + path;
}
function getCookieValue(name){ /**獲取cookie的值，根據cookie的鍵獲取值**/
//用處理字符串的方式查找到key對應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值結尾的位置
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){ /**根據cookie的鍵，刪除cookie，其實就是設置其失效**/
var name = escape(name);
var expires = new Date(0);
path = path == "" ? "" : ";path=" + path;
document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}
/**實現功能，保存用戶的登錄信息到cookie中。當登錄頁面被打開時，就查詢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.href = "http://www.baidu.com";
}else{
alert("不記密碼登錄。");
window.location.href = "http://www.baidu.com";
}
}
</script>
</head>
<body>
<center>
<table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" >
<tr>
<td align="center" colspan="2">歡迎使用XXX管理系統</td>
</tr>
<tr>
<td align="right">
<label>用戶名：</label>
</td>
<td align="left">
<input type="text" id="txtUserName" name="txtUserName" />
</td>
</tr>
<tr>
<td align="right">
<label>密 碼：</label>
</td>
<td align="left">
<input type="password" id="txtUserPass" name="txtUserPass" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<span >是否記住密碼</span>
<input type="checkbox" id="chkRememberPass" name="chkRememberPass" />
</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>看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
