javascript設置和獲取cookie的方法實例詳解

更新時間：2016年01月05日 15:36:32 作者：taozi165

這篇文章主要介紹了javascript設置和獲取cookie的方法,結(jié)合實例形式較為詳細的分析總結(jié)了JavaScript操作cookie簡單實現(xiàn)數(shù)據(jù)存儲與讀取的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了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");//用戶名輸入框?qū)ο?
    var passwordElem = document.getElementById("password");//密碼輸入框?qū)ο?
    var currUserElem = document.getElementById("currUser");//復選框?qū)ο?
    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,所以在本地測試時是沒有效果的，需要上傳到服務器試一下。

更多關(guān)于JavaScript操作cookie相關(guān)內(nèi)容可查看本站專題：《JavaScript 操作 cookie相關(guān)知識匯總》及《jQuery的cookie操作技巧總結(jié)》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: