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


Posted in Javascript onJanuary 05, 2016

本文实例讲述了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 未结束的字符串常量常见解决方法
Jan 24 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
js实现无缝滚动图
Feb 22 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
javascript简单比较日期大小的方法
Jan 05 #Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 #Javascript
简述jQuery ajax的执行顺序
Jan 05 #Javascript
JavaScript类型系统之正则表达式
Jan 05 #Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 #Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 #Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 #Javascript
You might like
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
php header Content-Type类型小结
2011/07/03 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python分析apache访问日志脚本分享
2015/02/26 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python计算auc的方法
2020/09/09 Python
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
统计专业自荐书
2014/07/06 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
Python的这些库,你知道多少?
2021/06/09 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Linux中sftp常用命令整理
2022/06/28 Servers
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python