javascript设置和获取cookie的方法实例详解

前端技术 2023/09/06 JavaScript

本文实例讲述了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;
  }
  //页面加载时间处理函数
  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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/16796

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案