详解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 相关文章推荐
JS 控制小数位数的实现代码
Aug 02 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
document.documentElement和document.body区别介绍
2013/09/16 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
python读取注册表中值的方法
2013/04/08 Python
介绍Python中内置的itertools模块
2015/04/29 Python
python实现发送邮件功能代码
2017/12/14 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
python yield关键词案例测试
2019/10/15 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
班会关于环保演讲稿
2013/12/29 职场文书
运动会解说词50字
2014/01/18 职场文书
初中化学教学反思
2014/01/23 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
实习单位鉴定评语
2014/04/26 职场文书
农村门前三包责任书
2014/07/25 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
个人先进事迹材料
2014/12/29 职场文书
工商行政处罚决定书
2015/06/24 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
倡议书怎么写?
2019/04/11 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
python scrapy简单模拟登录的代码分析
2021/07/21 Python
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS