详解Document.Cookie
具体来说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:'/'});
相关文章
用js的document.write输出的广告无阻塞加载的方法
一、广告代码分析很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。复制代码 代码如下:<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5...2014-06-07- 这篇文章主要介绍了jQuery使用cookie与json简单实现购物车功能的方法,介绍了jQuery实现购物车的步骤与关键代码,需要的朋友可以参考下...2016-04-18
- 这篇文章主要介绍了详解Document.Cookie的相关资料,需要的朋友可以参考下...2015-12-27
- 这篇文章主要介绍了js操作cookie保存浏览记录的方法,涉及JavaScript使用cookie记录并保存用户浏览网页信息的实现技巧,需要的朋友可以参考下...2015-12-27
- 这篇文章主要介绍了原生js配合cookie制作保存路径的拖拽效果,感兴趣的小伙伴们可以参考一下...2016-01-02
- 这篇文章主要介绍了jQuery基于json与cookie实现购物车的方法,涉及jQuery操作json格式数据与cookie存储购物车信息的相关技巧,需要的朋友可以参考下...2016-04-18
Java org.w3c.dom.Document 类方法引用报错
这篇文章主要介绍了Java org.w3c.dom.Document 类方法引用报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-08-07XmlDocument 创新对象时, 产生 xmlns="" 的解决方案
今天做开发时碰到的XmlDocument 创新对象时, 产生 xmlns=\"\" 的,经过分析总结了问题所在,有需要朋友参考一下,可能能帮助你解决这个问题。 1. 读取时,应该添加N...2016-11-25PHP基于cookie与session统计网站访问量并输出显示的方法
这篇文章主要介绍了PHP基于cookie与session统计网站访问量并输出显示的方法,涉及PHP基于cookie与session读写操作记录网站访问量及调用图片形式输出对应数量的实现技巧,需要的朋友可以参考下...2016-01-18- 这篇文章主要介绍了jQuery通过写入cookie实现更换网页背景的方法,涉及jQuery结合cookie设置页面元素属性的相关操作技巧,需要的朋友可以参考下...2016-04-18
php xmlreader simplexml DOMDocument等读取xml的例子
在php中处理xml文档的类或插件是非常的多了,今天我来为各位介绍xmlreader simplexmlDOMDocument 等读取xml的例子,希望下文能帮助到大家。 要处理 XML 文件,有两种...2016-11-25- cookie 最早是网景公司的雇员 Lou Montulli 在1993年3月发明,后被 W3C 采纳,目前 cookie 已经成为标准,所有的主流浏览器如 IE、Chrome、Firefox、Opera 等都支持...2016-01-16
- 这篇文章主要介绍了JS通过Cookie判断页面是否为首次打开 的相关资料,需要的朋友可以参考下...2016-02-12
- 这篇文章主要通过多方面对比分析php中Cookie与Session的区别,分别对Cookie与Session做一个简单介绍和总结,感兴趣的小伙伴们可以参考一下...2016-02-21
- 下面小编就为大家带来一篇PHP设置Cookie的HTTPONLY属性方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-02-18
IE下document.referrer 拒绝访问的解决方法
原理就是给IE浏览器的页面偷偷加了个链接,然后自动点这个链接,于是referrer就能保留了,感兴趣的朋友可以参考下...2021-09-22- 在php应用中PHP操作XML是常常要用到的地方,在php中操作xml文档有很多种方法,如DOMDocument就是一个对xml解析,读写,增加,删除的好工具了,下面我来分享一下我对php xml理解与...2016-11-25
PHP中使用DOMDocument来处理HTML、XML文档的示例
这篇文章主要介绍了PHP中使用DOMDocument来处理HTML、XML文档的示例,帮助大家更好的理解和学习使用php语言,感兴趣的朋友可以了解下...2021-04-29- 这篇文章主要介绍了jQuery实现元素拖拽并cookie保存顺序的方法,涉及jQuery响应鼠标事件实现页面元素属性变换的技巧与使用jQuery的cookie插件保存页面信息的功能,需要的朋友可以参考下...2016-02-23
php中DOMDocument与SimpleXML创建与解析xml程序
通过DOM扩展创建一个DOMDocument对象。通过DOMDocument对象的方法向文档添加元素,最后通过save()或saveXML()方法来生成文档,也可以通过SimpleXML来快速解析xml文档。...2016-11-25