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-11
JavaScript數(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

