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

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

这篇文章主要介绍了javascript设置和获取cookie的方法,结合实例形式较为详细的分析总结了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;
  }
  //页面加载时间处理函数
  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实现定时隐藏与显示图片的方法
这篇文章主要介绍了JavaScript实现定时隐藏与显示图片的方法,可实现javascript定时关闭图片的功能,涉及javascript针对页面元素属性定时操作的相关技巧,需要的朋友可以参考下
2015-08-08
创建一般js对象的几种方式
本文主要介绍了创建一般js对象的几种方式。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript数组Array对象增加和删除元素方法总结
这篇文章主要介绍了JavaScript数组Array对象增加和删除元素方法,实例总结了pop方法、push方法、splice方法、concat方法等的使用技巧,需要的朋友可以参考下
2015-01-01
一步一步教你写淡入淡出带注释的图片轮播插件（一）
抽空写了个类似的效果，做了一定程度的封装，虽然也只能勉强算个轻量级原生小插件吧，但还是分享出来，并做一步一步的教程，希望能给有需要的朋友一些帮助吧。
2010-10-10
微信小程序 MinUI组件库系列之badge徽章组件示例
这篇文章主要介绍了微信小程序 MinUI组件库系列之badge徽章组件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
JavaScript 阻止超链接跳转的操作方法(多种写法)
很多朋友问小编能否通过JavaScript来阻止超链接的跳转呢，今天给大家通过多种写法来实现这一功能，具体实例代码跟随小编一起看看吧
2021-06-06
浅析js实现网页截图的两种方式
这篇文章主要介绍了浅析js实现网页截图的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
JS模拟百度搜索框和选项卡的实现
本文主要介绍了JS模拟百度搜索框和选项卡的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-03-03
微信小程序引入Vant组件库过程解析
这篇文章主要介绍了微信小程序引入Vant组件库过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
详解JS中如何终止foreach循环
forEach专门用来循环数组,可以直接取到元素,同时也可以取到index值,终止forEach存在局限性,不能continue跳过或者break终止循环,所以本文给大家详细介绍了在JS中如何终止foreach循环,需要的朋友可以参考下
2024-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具