本文實例講述了JS使用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" style="margin-top:100px;"> <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" 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>
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
