详解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 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 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加密解密类代码
2011/11/27 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python数据类型学习笔记
2016/01/13 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python configparser模块常用方法解析
2020/05/22 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
纬创Java面试题笔试题
2014/10/02 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
门面房租房协议书
2014/08/20 职场文书
综治工作汇报材料
2014/10/27 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang