javascript設置和獲取cookie的方法實例詳解
本文實例講述了javascript設置和獲取cookie的方法。分享給大家供大家參考,具體如下:
1. 設置cookie
function setCookie(cookieName,cookieValue,cookieExpires,cookiePath) { cookieValue = escape(cookieValue);//編碼latin-1 if(cookieExpires=="") { var nowDate = new Date(); nowDate.setMonth(nowDate.getMonth()+6); cookieExpires = nowDate.toGMTString(); } if(cookiePath!="") { cookiePath = ";Path="+cookiePath; } document.cookie= cookieName+"="+cookieValue+";expires="+cookieExpires+cookiePath; }
2. 獲取cookie
function getCookieValue(cookieName) { var cookieValue = document.cookie; var cookieStartAt = cookieValue.indexOf(""+cookieName+"="); if(cookieStartAt==-1) { cookieStartAt = cookieValue.indexOf(cookieName+"="); } if(cookieStartAt==-1) { cookieValue = null; } else { cookieStartAt = cookieValue.indexOf("=",cookieStartAt)+1; cookieEndAt = cookieValue.indexOf(";",cookieStartAt); if(cookieEndAt==-1) { cookieEndAt = cookieValue.length; } cookieValue = unescape(cookieValue.substring(cookieStartAt,cookieEndAt));//解碼latin-1 } return cookieValue; }
例子:
<!doctype html> <html> <head> <title>cookie</title> <meta charset="utf-8"> <script language="javascript" type="text/javascript"> //獲取cookie function getCookieValue(cookieName) { var cookieValue = document.cookie; var cookieStartAt = cookieValue.indexOf(""+cookieName+"="); if(cookieStartAt==-1) { cookieStartAt = cookieValue.indexOf(cookieName+"="); } if(cookieStartAt==-1) { cookieValue = null; } else { cookieStartAt = cookieValue.indexOf("=",cookieStartAt)+1; cookieEndAt = cookieValue.indexOf(";",cookieStartAt); if(cookieEndAt==-1) { cookieEndAt = cookieValue.length; } cookieValue = unescape(cookieValue.substring(cookieStartAt,cookieEndAt));//解碼latin-1 } return cookieValue; } //設置cookie function setCookie(cookieName,cookieValue,cookieExpires,cookiePath) { cookieValue = escape(cookieValue);//編碼latin-1 if(cookieExpires=="") { var nowDate = new Date(); nowDate.setMonth(nowDate.getMonth()+6); cookieExpires = nowDate.toGMTString(); } if(cookiePath!="") { cookiePath = ";Path="+cookiePath; } document.cookie= cookieName+"="+cookieValue+";expires="+cookieExpires+cookiePath; } //頁面加載時間處理函數(shù) function window_onload() { var userNameElem = document.getElementById("userName");//用戶名輸入框對象 var passwordElem = document.getElementById("password");//密碼輸入框對象 var currUserElem = document.getElementById("currUser");//復選框對象 var currUser = getCookieValue("currUser"); if(currUser!=null) { userNameElem.value=currUser; currUserElem.checked = true; } if(userNameElem.value!="") { passwordElem.focus();//密碼輸入框獲得焦點 } else { currUserElem.focus();//用戶名輸入框獲得焦點 } } //表單提交處理 function login() { var userNameElem = document.getElementById("userName"); var passwordElem = document.getElementById("password"); var currUserElem = document.getElementById("currUser"); if(userNameElem.value=="" || passwordElem.value=="") { alert("用戶名或密碼不能為空!"); if(userNameElem.value=="") { userNameElem.focus();//用戶名輸入框獲得焦點 } else { passwordElem.focus();//密碼輸入框獲得焦點 } return false; } if(currUserElem.checked) { setCookie("currUser",userNameElem.value,"","");//設置cookie } else { var nowDate = new Date();//當前日期 nowDate.setMonth(nowDate.getMonth()-2);//將cookie的過期時間設置為之前的某個日期 cookieExpires = nowDate.toGMTString();//過期時間的格式必須是GMT日期的格式 setCookie("userName","",cookieExpires,"");//刪除一個cookie只要將過期時間設置為過去的一個時間即可 } return true; } </script> <style type="text/css"> div{ font-size:12px; } </style> </head> <body onload="window_onload()"> <div> <form id="loginForm" onsubmit="return login()"> 用戶名:<input type="text" id="userName"><br> 密 碼:<input type="password" id="password"> <input type="checkbox" id="currUser">記住用戶名<br> <input type="submit" value="登錄"> </form> </div> </body> </html>
注意:
由于google Chrome瀏覽器為了安全只支持online-cookie,所以在本地測試時是沒有效果的,需要上傳到服務器試一下。
更多關于JavaScript操作cookie相關內容可查看本站專題:《JavaScript 操作 cookie相關知識匯總》及《jQuery的cookie操作技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
原生JavaScript實現(xiàn)的簡單省市縣三級聯(lián)動功能示例
這篇文章主要介紹了原生JavaScript實現(xiàn)的簡單省市縣三級聯(lián)動功能,結合完整實例形式分析了javascript聯(lián)動菜單的實現(xiàn)方法,涉及javascript事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-05-05淺析JavaScript中break、continue和return的區(qū)別
這篇文章主要介紹了JavaScript中break、continue和return的區(qū)別,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-11-11JavaScript數(shù)組中reduce方法的應用詳解
JavaScript 中的reduce()方法可以用于將數(shù)組元素匯總為單個值,,所以本文為大家整理了一些JavaScript數(shù)組中reduce方法的應用,需要的可以參考一下2023-07-07微信小程序云開發(fā)如何實現(xiàn)數(shù)據(jù)庫自動備份實現(xiàn)
這篇文章主要介紹了小程序云開發(fā) 數(shù)據(jù)庫自動備份實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08