详解Document.Cookie_javascript技巧

具体来说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:'/'});

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索document.cookie
js_document.cookie
document.cookie、document.cookie 设置、document.cookie 为空、js document.cookie、document.cookie path,以便于您获取更多的相关知识。

时间: 2024-09-23 22:09:52

详解Document.Cookie_javascript技巧的相关文章

IntersectionObserver API 详解篇_javascript技巧

温馨提示:本文目前仅适用于在 Chrome 51 及以上中浏览. 2016.11.1 追加,Firefox 52 也已经实现. 2016.11.29 追加,Firefox 的人担心目前规范不够稳定,未来很难保证向后兼容,所以禁用了这个 API,需要手动打开 dom.IntersectionObserver.enabled 才行. IntersectionObserver API 是用来监视某个元素是否滚动进了浏览器窗口的可视区域(视口)或者滚动进了它的某个祖先元素的可视区域内.它的主要功能是用来

javascript跨域方法、原理以及出现问题解决方法(详解)_javascript技巧

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域      基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain

Bootstrap框架的学习教程详解(二)_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.bootcss.com/getting-started/ PS:其实我们不用下载bootstrap也可以使用它: Bootst

Git 教程之安装配置详解_相关技巧

Git 安装配置 在使用Git前我们需要先安装 Git.Git 目前支持 Linux/Unix.Solaris.Mac和 Windows 平台上运行. Git 各平台安装包下载地址为:http://git-scm.com/downloads Linux 平台上安装 Git 的工作需要调用 curl,zlib,openssl,expat,libiconv 等库的代码,所以需要先安装这些依赖工具. 在有 yum 的系统上(比如 Fedora)或者有 apt-get 的系统上(比如 Debian 体系

ASP.NET4 GridView的四种排序样式详解_实用技巧

与ASP.NET 的其他Web控件一能够,Gridview控件拥有很多不同的CSS样式属性设置,包括象CssClass,Font字体,ForeColor,BackColor,BackColor, Width, Height等等.Gridview还包括了一些应用在表格的行上的样式属性,比如RowStyle, AlternatingRowStyle, HeaderStyle,和PagerStyle,它们都提供了象CssClass和Font这些基本的属性设置.  在 ASP.NET 4.0中的Grid

ASP.NET MVC中使用jQuery时的浏览器缓存问题详解_实用技巧

介绍 尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持,还是有必要了解一下如何高效地使用http协议. 首先要做的事情是在服务器端支持HTTP GET,定义不同的URL输出不同的数据(MVC里对应的就是action).如果要使用同一个地址获取不同的数据,那就不对了,一个HTTP POST也不行因为POST不能被缓存.许多开发人员使用POST主要有2个原因:明确了数据不能被缓存,或者是避免JSON攻击(JSON返回数组的时候可以被入侵). 缓存解释 jQuery全局对象里的ajax

asp内置对象 ObjectContext 事务管理 详解_应用技巧

asp内置对象 ObjectContext 详解 您可以使用 ObjectContext 对象提交或放弃一项由 Microsoft Transaction Server (MTS) 管理的事务,它由 ASP 页包含的脚本初始化.  ASP 包含 @TRANSACTION 指令时,该页会在事务中运行,直到事务成功或失败后才会终止.  语法 ObjectContext.method 方法 SetComplete SetComplete 方法声明脚本不了解事务未完成的原因.如果事务中的所有组件都调用 

JavaScript中的原型和继承详解(图文)_javascript技巧

请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术

JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)_javascript技巧

一.函数作用域 1.函数作用域 就是作用域在一个"Function"里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失败 console.log( a, b, c ); // 三个全都失败 上面的"foo"函数内的几个标识符,放到函数外面访问就都会报错. 2.立即执行函数表达式 在任意代码片段外部