JS使用cookie保存用戶登錄信息操作示例
本文實(shí)例講述了JS使用cookie保存用戶登錄信息。分享給大家供大家參考,具體如下:
通常cookie和session,是web開(kāi)發(fā)中用于存儲(chǔ)信息的對(duì)象,session存在于服務(wù)器的內(nèi)存中,而cookie則是存在客戶端,所以js可以直接操作cookie進(jìn)行信息的存儲(chǔ)和讀取。
js存放cookie一般的寫法,如:document.cookie="userName=admin";
,如果是多個(gè)鍵值對(duì):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>無(wú)標(biāo)題文檔</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能在整個(gè)網(wǎng)站下使用,path=/temp,表示cookie只能在temp目錄下使用 path = path == "" ? "" : ";path=" + path; //GMT(Greenwich Mean Time)是格林尼治平時(shí),現(xiàn)在的標(biāo)準(zhǔn)時(shí)間,協(xié)調(diào)世界時(shí)是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對(duì)應(yīng)value var name = escape(name); //讀cookie屬性,這將返回文檔的所有cookie var allcookies = document.cookie; //查找名為name的cookie的開(kāi)始位置 name += "="; var pos = allcookies.indexOf(name); //如果找到了具有該名字的cookie,那么提取并使用它的值 if (pos != -1){ //如果pos值為-1則說(shuō)明搜索"version="失敗 var start = pos + name.length; //cookie值開(kāi)始的位置 var end = allcookies.indexOf(";",start); //從cookie值開(kāi)始的位置起搜索第一個(gè)";"的位置,即cookie值結(jié)尾的位置 if (end == -1) end = allcookies.length; //如果end值為-1說(shuō)明cookie列表里只有一個(gè)cookie var value = allcookies.substring(start,end); //提取cookie的值 return (value); //對(duì)它解碼 }else{ //搜索失敗,返回空字符串 return ""; } } function deleteCookie(name,path){ /**根據(jù)cookie的鍵,刪除cookie,其實(shí)就是設(shè)置其失效**/ var name = escape(name); var expires = new Date(0); path = path == "" ? "" : ";path=" + path; document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path; } /**實(shí)現(xiàn)功能,保存用戶的登錄信息到cookie中。當(dāng)?shù)卿涰?yè)面被打開(kāi)時(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(){ /**用戶登錄,其中需要判斷是否選擇記住密碼**/ //簡(jiǎn)單驗(yàn)證一下 var userName = document.getElementById("txtUserName").value; if(userName == ''){ alert("請(qǐng)輸入用戶名。"); return; } var userPass = document.getElementById("txtUserPass").value; if(userPass == ''){ alert("請(qǐng)輸入密碼。"); 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動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js字符串轉(zhuǎn)json的三種簡(jiǎn)單方法舉例
在很多時(shí)候我們都需要將數(shù)據(jù)轉(zhuǎn)換為JSON的格式去進(jìn)行請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于js字符串轉(zhuǎn)json的三種簡(jiǎn)單方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04JavaScipt驗(yàn)證URL新方法詳解(2023 年版)
這篇文章主要為大家介紹了JavaScipt驗(yàn)證URL新方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12動(dòng)態(tài)讀取JSON解析鍵值對(duì)的方法
這篇文章主要介紹了動(dòng)態(tài)讀取JSON解析鍵值對(duì)的方法,需要的朋友可以參考下2014-06-06關(guān)于arguments,callee,caller等的測(cè)試
關(guān)于arguments,callee,caller等的測(cè)試...2006-12-12用原生js統(tǒng)計(jì)文本行數(shù)的簡(jiǎn)單示例
這篇文章我們來(lái)看看如何利用原生的JavaScript實(shí)現(xiàn)統(tǒng)計(jì)文本的行數(shù),代碼實(shí)現(xiàn)起來(lái)很簡(jiǎn)單,有需要的可以參考借鑒。2016-08-08uniapp路由uni-simple-router實(shí)例詳解
uni-simple-router專為uniapp打造的路由器,和uniapp深度集成,這篇文章主要給大家介紹了關(guān)于uniapp路由uni-simple-router的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09js實(shí)現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動(dòng)顯示的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動(dòng)顯示的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10JavaScript樹(shù)形結(jié)構(gòu)數(shù)組處理之遞歸問(wèn)題
這篇文章主要介紹了JavaScript樹(shù)形結(jié)構(gòu)數(shù)組處理之遞歸問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06