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 相关文章推荐
jQuery阻止同类型事件小结
Apr 19 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
php实现快速排序法函数代码
2012/08/27 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP多进程编程实例详解
2017/07/19 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
css配合jquery美化 select
2013/11/29 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
面试常见的js算法题
2017/03/23 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
python中提高pip install速度
2020/02/14 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Python如何输出警告信息
2020/07/30 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
个人对照检查材料
2014/02/12 职场文书
表决心的诗句大全
2014/03/11 职场文书
《画风》教学反思
2014/04/16 职场文书
宿舍标语大全
2014/06/19 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
品质保证书格式
2015/02/28 职场文书
员工工作表现自我评价
2015/03/06 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers