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 回车事件实现代码
Aug 23 Javascript
Node.js文件操作详解
Aug 16 Javascript
jquery操作select方法汇总
Feb 05 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
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遍历目录viewDir函数
2009/12/15 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
python正则表达式中的括号匹配问题
2014/12/14 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
如何在pycharm中安装第三方包
2020/10/27 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
简历的自我评价
2014/02/03 职场文书
硕士学位申请报告
2015/05/15 职场文书