详解Document.Cookie


Posted in Javascript onDecember 25, 2015

具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案。

同时我们也看到,由于采用服务器端保持状态的方案在客户端也需要保存一个标识,所以session机制可能需要借助于cookie机制来达到保存标识的目的,但实际上它还有其他选择。

设置cookie

    每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:

document.cookie="userId=828";

    如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:

document.cookie="userId=828; userName=hulk";

    在cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。在cookie的名中做到这点很容易,但要保存的值是不确定的。如何来存储这些值呢?方法是用escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储于cookie值中,而且使用此种方案还可以避免中文乱码的出现。例如:

document.cookie="str="+escape("I love ajax");

    相当于:

document.cookie="str=I%20love%20ajax";

    当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值,这在前面已经介绍过。

    尽管document.cookie看上去就像一个属性,可以赋不同的值。但它和一般的属性不一样,改变 它的赋值并不意味着丢失原来的值,例如连续执行下面两条语句:

document.cookie="userId=828";
  document.cookie="userName=hulk";

   这时浏览器将维护两个cookie,分别是userId和userName,因此给document.cookie赋值更像执行类似这样的语句:

document.addCookie("userId=828");
  document.addCookie("userName=hulk");

    事实上,浏览器就是按照这样的方式来设置cookie的,如果要改变一个cookie的值,只需重新赋值,例如:

document.cookie="userId=929";

    这样就将名为userId的cookie值设置为了929。

    获取cookie的值

    下面介绍如何获取cookie的值。cookie的值可以由document.cookie直接获得:

var strCookie=document.cookie;

   这将获得以分号隔开的多个名/值对所组成的字符串,这些名/值对包括了该域名下的所有cookie。例如:

<script language="JavaScript" type="text/javascript">
  <!--
  document.cookie="userId=828";
  document.cookie="userName=hulk";
  var strCookie=document.cookie;
  alert(strCookie);
  //-->
  </script>

    图7.1显示了输出的cookie值。由此可见,只能够一次获取所有的cookie值,而不能指定cookie名称来获得指定的值,这正是处理 cookie值最麻烦的一部分。用户必须自己分析这个字符串,来获取指定的cookie值,例如,要获取userId的值,可以这样实现:

<script language="JavaScript" type="text/javascript">
  <!--
  //设置两个cookie
  document.cookie="userId=828";
  document.cookie="userName=hulk";
  //获取cookie字符串
  var strCookie=document.cookie;
  //将多cookie切割为多个名/值对
  var arrCookie=strCookie.split("; ");
  var userId;
  //遍历cookie数组,处理每个cookie对
  for(var i=0;i<arrCookie.length;i++){
  var arr=arrCookie[i].split("=");
  //找到名称为userId的cookie,并返回它的值
  if("userId"==arr[0]){
  userId=arr[1];
  break;
  }
  }
  alert(userId);
  //-->
  </script>

  这样就得到了单个cookie的值用类似的方法,可以获取一个或多个cookie的值,其主要的技巧仍然是字符串和数组的相关操作。

    给cookie设置终止日期

    到现在为止,所有的cookie都是单会话cookie,即浏览器关闭后这些cookie将会丢失,事实上这些cookie仅仅是存储在内存中,而没有建立相应的硬盘文件。

    在实际开发中,cookie常常需要长期保存,例如保存用户登录的状态。这可以用下面的选项来实现:

document.cookie="userId=828; expires=GMT_String";

   其中GMT_String是以GMT格式表示的时间字符串,这条语句就是将userId这个cookie设置为GMT_String表示的过期时间,超过这个时间,cookie将消失,不可访问。例如:如果要将cookie设置为10天后过期,可以这样实现:

<script language="JavaScript" type="text/javascript">
  <!--
  //获取当前时间
  var date=new Date();
  var expireDays=10;
  //将date设置为10天以后的时间
  date.setTime(date.getTime()+expireDays*24*3600*1000);
  //将userId和userName两个cookie设置为10天后过期
  document.cookie="userId=828; userName=hulk; expire="+date.toGMTString();
  //-->
  </script>
 
  删除cookie
 
  为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:
 
  <script language="JavaScript" type="text/javascript">
  <!--
  //获取当前时间
  var date=new Date();
  //将date设置为过去的时间
  date.setTime(date.getTime()-10000);
  //将userId这个cookie删除
  document.cookie="userId=828; expire="+date.toGMTString();
  //-->
  </script>

ps:Jquery Cookie的操作参数:

创建一个会话cookie:

<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date();
var expireDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expire="+date.toGMTString();
//-->
</script>

删除cookie

为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:

<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();
//-->
</script>

注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie。

创建一个持久cookie:

$.cookie(‘cookieName','cookieValue',{expires:7});

注:当指明时间时,故称为持久cookie,并且有效时间为天。

创建一个持久并带有效路径的cookie:

$.cookie(‘cookieName','cookieValue',{expires:7,path:'/'});

注:如果不设置有效路径,在默认情况下,只能在cookie设置当前页面读取该cookie,cookie的路径用于设置能够读取cookie的顶级目录。

创建一个持久并带有效路径和域名的cookie:

$.cookie(‘cookieName','cookieValue',{expires:7,path:'/',domain: ‘chuhoo.com',secure: false,raw:false});

注:domain: 创建cookie所在网页所拥有的域名;secure:默认是false,如果为true,cookie的传输协议需为https;raw:默认为 false,读取和写入时候自动进行编码和解码(使用encodeURIComponent编码,使用decodeURIComponent解码),关闭 这个功能,请设置为true。

获取cookie:

$.cookie(‘cookieName');   //如果存在则返回cookieValue,否则返回null。

删除cookie:

$.cookie(‘cookieName',null);

注:如果想删除一个带有效路径的cookie,如下:$.cookie(‘cookieName',null,{path:'/'});

Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 #Javascript
JQuery datepicker 用法详解
Dec 25 #Javascript
一道JS前端闭包面试题解析
Dec 25 #Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 #Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 #Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 #Javascript
JavaScript中Window对象的属性及事件
Dec 25 #Javascript
You might like
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
python如何控制进程或者线程的个数
2020/10/16 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
预备党员入党思想汇报
2014/01/04 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
养牛场项目建议书
2014/05/13 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android