最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js cookie使用详细介绍
时间:2012-09-19 编辑:简简单单 来源:一聚教程网
cookie是基于http协议,cookie就是限制性的存储字符串的,我们可以通过document.cookie来存储字符串。
而最近手头上有个项目上涉及到有关于cookie的操作,即登录与退出,
对于这个需求,逻辑很简单
1.登录前的cookie检查
2.登录取的后端数据,再存到cookie
3.退出登录,清楚cookie.
这里面除了逻辑之外,涉及到了cookie取值和设值的问题。
这里我用到了jquery的第三方插件$.cookie来取值和设置。
根据之上的逻辑与$.cookie来取值和设值,这个任务很快就完成了,在本地apache测试没有问题。
接着就提交测试了,想不到问题马上出现了,目前的网站是a.xxx.com;而我们的另一个二级域名的网站b.xxx.com也有登录,即两个网站是可以设置document.domain="xxx.com"
在网站b.xxx.com登录成功后,已经写了个$.cookie("userid"), 在控制台打document.cookie="userid=112343",
第一次进a.xxx.com貌似是对的,因为$.cookie("userid")有值,所以也会进入已经登录状态,但点退出登录后,
再进b.xxx.com后还是登录状态。难道是cookie没有共享, 看下document.cookie="userid=112343;userid=0";
在这里很奇怪,在a.xxx.com退出登录时,已经设置了$.cookie("userid",0),但并没有覆盖之前的userid,而是追加了一个新的userid=0,之前的userid还存在。
看来清除cookie不是重新设置值这么简单。
在网上查了下资料,即清除cookie还需要增加个过期时间,即小过现在的时间就可以了,代码就修改成
$.cookie("userid", 0 , {expirs:new Date() -1000});
但还是没达到效果。
在这里也科普了下cookie的组成, cookie其实是由name,value, expires,path,domain等属性组成的,
如果写cookie的时候设置了path与domain, 则清除cookie时也需要设置相同的path,domain, 如果没有设置domain, 即取当前的location.host
所以原因找到了。
当b.xxx.com写cookie时设置了domain:xxx.com,和path:''/", 而我在a.xxx.com清cookie时只是设置了value和过期时间,并没有写domain和path, 所以并
没有清除原来的userid ,而是生成了新的userid,这个userid默认的domain为a.xxx.com,只是因为有过期时间,马上就消除了。但并没有清除之前的userid.
所以改代码为
$.cookie("userid",0,{expires:new Date()-1000, domain:"7k7k.com", path:"/"}
即清除了之前的userid.
二.cookie的读取操作
要精确的对 cookie 进行读取其实很简单,就是对字符串进行操作。从w3school上copy这段代码来做分析:
function getCookie(c_name){
if (document.cookie.length>0){ //先查询cookie是否为空,为空就return ""
c_start=document.cookie.indexOf(c_name + "=") //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1
if (c_start!=-1){
c_start=c_start + c_name.length+1 //最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置
c_end=document.cookie.indexOf(";",c_start) //其实我刚看见indexOf()第二个参数的时候猛然有点晕,后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项,所以通过";"号是否存在来判断
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end)) //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础,想了解的可以搜索下,在文章结尾处也会进行讲解cookie编码细节
}
}
return ""
}
当然想实现读取cookie的方法还有不少,比如数组,正则等,这里就不往细说了。
三.设置cookie的有效期
文章中常常出现的 cookie 的生命周期也就是有效期和失效期,即 cookie 的存在时间。在默认的情况下,cookie 会在浏览器关闭的时候自动清除,但是我们可以通过expires来设置 cookie 的有效期。语法如下:
document.cookie = "name=value;expires=date"
上面代码中的date值为GMT(格林威治时间)格式的日期型字符串,生成方式如下:
var _date = new Date();
_date.setDate(_date.getDate()+30);
_date.toGMTString();
上面三行代码分解为几步来看:
通过new生成一个Date的实例,得到当前的时间;
getDate()方法得到当前本地月份中的某一天,接着加上30就是我希望这个cookie能过在本地保存30天;
接着通过setDate()方法来设置时间;
最后 用toGMTString()方法把Date对象转换为字符串,并返回结果
通过下面这个完整的函数来说明在创建 cookie 的过程中我们需要注意的地方 - 从w3school复制下来的。创建一个在 cookie 中存储信息的函数:
function setCookie(c_name, value, expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
使用方法:setCookie('username','Darren',30)
现在我们这个函数是按照天数来设置cookie的有效时间,如果想以其他单位(如:小时)来设置,那么改变第三行代码即可:
exdate.setHours(exdate.getHours() + expiredays);
这样设置以后的cookie有效期就是按照小时为单位的。
常见问题中有提到清除 cookie 的两种方法,现在要说的是使 cookie 失效,通过把有效期的时间设置为一个已过期的时间。既然已经有了设置有效期的方法,那么设置失效期的方法就请感兴趣的朋友自己动手了^_^。下面继续比较深的cookie话题。
Cookie 高级篇
一.cookie 路径概念
在基础知识中有提到 cookie 有域和路径的概念,现在来介绍路径在 cookie 中的作用。
cookie 一般都是由于用户访问页面而被创建的,可是并不是只有在创建 cookie 的页面才可以访问这个 cookie。
默认情况下,只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问,这个是因为安全方面的考虑,造成不是所有页面都可以随意访问其他页面创建的 cookie。举个例子:
那么如何让这个 cookie 能被其他目录或者父级的目录访问类,通过设置 cookie 的路径就可以实现。例子如下:
document.cookie = "name=value;path=path" document.cookie = "name=value;expires=date;path=path" 红色字体path就是 cookie 的路径,最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie,所有的页面都可以访问到了:
代码如下 | 复制代码 |
document.cookie = "name=Darren;path=/" |
二.cookie 域概念
路径能解决在同一个域下访问 cookie 的问题,咱们接着说 cookie 实现同域之间访问的问题。语法如下:
代码如下 | 复制代码 |
document.cookie = "name=value;path=path;domain=domain" |
红色的domain就是设置的 cookie 域的值。
例如 "www.qq.com" 与 "sports.qq.com" 公用一个关联的域名"qq.com",我们如果想让 "sports.qq.com" 下的cookie被 "www.qq.com" 访问,我们就需要用到 cookie 的domain属性,并且需要把path属性设置为 "/"。例:
代码如下 | 复制代码 |
document.cookie = "username=Darren;path=/;domain=qq.com" |
注:一定的是同域之间的访问,不能把domain的值设置成非主域的域名。
三.cookie 安全性
通常 cookie 信息都是使用HTTP连接传递数据,这种传递方式很容易被查看,所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要,那么就要求使用加密的数据传输。
所以 cookie 的这个属性的名称是“secure”,默认的值为空。如果一个 cookie 的属性为secure,那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下:
document.cookie = "username=Darren;secure" 把cookie设置为secure,只保证 cookie 与服务器之间的数据传输过程加密,而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密,得自己加密数据。
注:就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息,所以说到底,别把重要信息放cookie就对了,??..
四.cookie 编码细节
原本来想在常见问题那段介绍cookie编码的知识,因为如果对这个不了解的话编码问题确实是一个坑,所以还是详细说说。
在输入cookie信息时不能包含空格,分号,逗号等特殊符号,而在一般情况下,cookie 信息的存储都是采用未编码的方式。所以,在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码,在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时:
代码如下 | 复制代码 |
document.cookie = name + "="+ escape (value) |
再看看基础用法时提到过的getCookie()内的一句:
代码如下 | 复制代码 |
return unescape(document.cookie.substring(c_start,c_end)) |
这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。
实例
代码如下 | 复制代码 |
//写cookies函数 作者:翟振凯 }
SetCookie ("xiaoqi", "3") |
一个非常实用的javascript读写Cookie函数
一个非常实用的javascript读写Cookie函数
代码如下 | 复制代码 |
function GetCookieVal(offset)
|
如果点了确定,只要不清cookie,以后访问都不会再提示,如果不点确定则每次都会提示。放在js文件里,全站包含
代码如下 | 复制代码 |
总结:
1.cookie不是简单的name和value两个属性,还有expires,domain,path等属性,这个可以专门找cookie的概念来熟悉。
2.清cookie必须与设cookie时的domain与path一致。否则就不会清除而是追加。
cookie应该还有其他的很多方面的问题,希望大家可以帮笔者补充。
相关文章
- JS中cookie如何正确的使用 05-15
- JS中cookie是怎么使用的,它的缺点又是什么 05-15
- js使用cookie的方法详解 06-14
- JS创建和存储 cookie一些方法总结 09-25
- js cookie使用方法详解 09-02
- JS操作cookie详解(document.cookie对象) 06-29