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+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
Angular工具方法学习
Dec 26 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
JS实现滑动导航效果
Jan 14 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
Python Socket传输文件示例
2017/01/16 Python
Python 3中的yield from语法详解
2017/01/18 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
PyQt实现计数器的方法示例
2021/01/18 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
TCP/IP的分层模型
2013/10/27 面试题
物理专业本科生自荐信
2014/01/30 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
保护黄河倡议书
2014/05/16 职场文书
物流管理专业求职信
2014/05/29 职场文书
励志演讲稿300字
2014/08/21 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
工作证明英文模板
2014/10/21 职场文书
学前教育见习总结
2015/06/23 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
delete in子查询不走索引问题分析
2022/07/07 MySQL