出于浏览器的安全性限制,从WEB应用程序中访问用户本地文件系统是有许多限制的。但是WEB站点的开发人员可以使用cookie,将少量信息保存在用户本地硬盘的指定空间中。
document对象的cookie属性。使用这个属性,可以在javascript代码中创建cookie,访问cookie中的数据。
打开cookie文件是非常安全的,因为它们只是简单的文本文件。
每个网站或域名都有一个自己的文本文件,以保存该站点的所有cookie。
在浏览器中cookie的内容看起来是一些混乱的字符,在编写cookie的时候,会发现无须采用这种格式设置cookie的信息。
cookie不在浏览器之间共享,因此在使用IE访问某个网站时保存的cookie不能用于其他浏览器,反之亦然。
cookie字符串:
创建cookie时,可以设置6个部分:
name(名称),value(值),expires(过期时间),path(路径),domain(域),和secure(安全性),后四个是可选。
1:名称和值:
名称用来引用cookie,值是cookie的信息部分。
document.cookie="name=value;";
名称和值是必选的。如果不存储名称或值,则cookie无效的。
cookie的值是一个基本字符串,如果保存数值数据,那么该字符串就是数字字符。特殊字符要用编码。
如果没有设置过期时间,cookie就在用户关闭浏览器后过期。下次用户打开浏览器时,该cookie便不复存在了。
2:过期时间:
如果希望cookie存在的时间比单个回话更长,则需要使用cookie的过期时间。
document.cookie="name=value;expires=THE,28 Dec 2020 00:00:00 GMT;";
注意:过期日期的格式很重要,它应与toGMTString()方法给出的cookie的格式相同。
实际上,可以使用Date对象获取当前日期,再将cookie设置为该日期后的3个月过期,否则就需要在2020.12.28重写页面。
var expirDate=new Date();
expirDate.setMonth(expirDate.getMonth()+3);
document.cookie="name=value;expires="+expirDate.toGMTString()+";";
上述代码创建一个cookie,名称为name,值为value,在当前日期后3个过期。但其他因素可能导致cookie在过期日期之前就失败,如用户删除了cookie,或者到达了cookie数量的上限。
3:路径:
在99%的情况下,都仅需要设置cookie的name,value,和expires部分。
web服务器常常就将整个网站合理划分为不同的目录,而不是放在一个web目录中。
cookie不仅特定与某个web域,还特定与该域中的具体路径。如www.mysite.com/mybooks/中的页面设置了一个cookie,那么只有该目录或其子目录的页面才能读取和修改这个cookie。如果www.mysite.com/mylist/下的页面试图读取这个cookie,则会失败。因为cookie是特定于具体路径的,所以在mybooks/目录下设置的cookie不能由mylist/目录下的页面访问。
例如在域www.mysite.com/mybooks/下有两个子目录www.mysite.com/mybooks/mybook01和www.mysite.com/mybooks/mybook02
若我设置
document.cookie="name=value;expires="+expirDate.toGMTString()+";path=/mybooks";
如果要指定cookie可用于设置它的域的所有子目录,则可以用"/"字符指定根目录的路径。
document.cookie="name=value;expires="+expirDate.toGMTString()+";path=/";
现在,该cookie就可以供设置它的域下的所有目录访问。如果该域包含多个站点,则最好不好这样设置,否则其中的网站就可以访问这个cookie信息。
某人使用当前目录及其子目录。
4:域
默认的情况下,cookie仅用于设置它的域下的页面。在大多情况下,这是我们想要的。如果不想要这样,那么可以通过cookie的domain部分指定cookie可用于某个域下的所有子目录。
document.cookie="name=value;expires="+expirDate.toGMTString()+";path=/mybooks;domain=mydomain.com;";
上述代码可以由www.myweb01.mydomain.com和www.
myweb02.mydomain.com内共享但不能由www.mydomain.com和www.myweb02.com因为它们的域名不同。
5:安全
cookie字符串的最后一部分是secure,是一个布尔值,设置为true则cookie仅发送给尝试使用安全通道检索它的web服务器(SSL建立服务器)。默认是false,总是发送cookie而不考虑安全性。
创建cookie
function setCookie(cookieName,cookieValue,cookiePath,cookieExpirse){
cookieValue=escape(cookieValue);
if(cookieExpirse==""){
var nowDate=new Date();
nowDate.setMonth(nowDate.getMonth()+6);
cookieExpirse=nowDate.toGMTString();
}
if(cookiePath!=""){
cookiePath=";path="+cookiePath;
}
document.cookie=cookieName+"="+cookieValue+";expires="+cookieExpirse+cookiePath;
}
setCookie("name1","rose1","","");
setCookie("name2","rose2","","");
setCookie("name3","rose3","10 May 2018","/")
alert(document.cookie)
保存文件到本地服务器上查看
可以看到三个cookie都显示为名称/值对,并用“;”分号来分隔,但是没有显示过期日期,路径也没有显示出来。
cookie的名称最好只使用字符和数字,没有空格,标点符号或特殊字符。
删除已有的cookie:
只需要修改cookie的值为空,并将其过期时间设置为一个过去了的时间。
setCookie("name3","","10 May 2000","")
获取cookie的值
使用document.cookie属性来获取cookie有两个局限性:
- 只是得到名称/值对,无法获得cookie的expires,path,domain和secure部分。
- 仅允许获取为某一路径和web服务器设置的所有cookie,只能一次性获取当前域和路径设置的所有cookie,无法获取指定名称的cookie(可以通过多种方法获取单个cookie,如字符串处理技术,从返回的字符串中截取需要的信息)
function getcookieValue(cookieName){
var cookieValue=document.cookie;
var cookieStartAt=cookieValue.indexOf(" "+cookieName+"=");
if(cookieStartAt==-1){
cookieStartAt=cookieValue.indexOf(cookieName+"=");
}
if(cookieStartAt==-1){
cookieValue=null;
}else{
cookieStartAt=cookieValue.indexOf("=",cookieStartAt)+1;
var cookieEndAt=cookieValue.indexOf(";",cookieStartAt);
if(cookieEndAt==-1){
cookieEndAt=cookieValue.length;
}
cookieValue=unescape(cookieValue.substring(cookieStartAt,cookieEndAt));
}
return cookieValue;
}
获取document.cookie字符串,并保存在变量cookieValue中。
var cookieEndAt=cookieValue.indexOf(";",cookieStartAt);
结尾位置是形参(名称)“;“分号的位置。
以上图为例子,假设上面就是通过document.cookie找到的所有的cookie。
我们把name2作为参数传入,也就是通过getcookieValue()函数获取name2的值。
var cookieStartAt=cookieValue.indexOf(" "+cookieName+"=");
从cookie列表中从头到尾找到“空格name2=”的位置。
此时 cookieStartAt的值为12,即name2前一个空格位置(位置从0开始算)
关于的用法请查看javascript知识总汇
我们的代码首先查找参数(name2)前面有空格的,发现找到了也就是不为-1然后代码跳过了以下几个步骤直接到截取代码部分。
我们先找到要截取的开始位置。
cookieStartAt=cookieValue.indexOf("=",cookieStartAt)+1;
从name2后开始找到第一个出现“=”的位置+1
此时cookieStartAt为18+1=19,即name2后面的”=“号位置+1(不包含等号)
然后到了结束位置
var cookieEndAt=cookieValue.indexOf(";",cookieStartAt);
从19的位置开始找第一个出现“;”位置。这里是24.
最后截取的位置就是19到24之间的所有字符,从0开始算起,substring()方法的第一个参数截取时包括在内,第二个参数截取时不包括在内。
cookieValue=unescape(cookieValue.substring(cookieStartAt,cookieEndAt));
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function setCookie(cookieName,cookieValue,cookieExpires,cookiePath){
cookieValue=escape(cookieValue);
if(cookieExpires==""){
var nowDate=new Date();
nowDate.setMonth(nowDate.getMonth()+6);
}
if(cookiePath!=""){
cookiePath="Path="+cookiePath;
}
document.cookie=cookieName+"="+cookieValue+";expires="+cookieExpires+cookiePath;
}
// setCookie("oo","pp","","");
// alert(document.cookie)
function getcookieValue(cookieName){
var cookieValue=document.cookie;
var cookieStartAt=cookieValue.indexOf(" "+cookieName+"=");
if(cookieStartAt==-1){
cookieStartAt=cookieValue.indexOf(cookieName+"=");
}
if(cookieStartAt==-1){
cookieValue=null;
}else{
cookieStartAt=cookieValue.indexOf("=",cookieStartAt)+1;
var cookieEndAt=cookieValue.indexOf(";",cookieStartAt);
if(cookieEndAt==-1){
cookieEndAt=cookieValue.length;
}
cookieValue=unescape(cookieValue.substring(cookieStartAt,cookieEndAt));
}
return cookieValue;
}
var list=getcookieValue("name2");
alert(list)
setCookie("name1","rose1","","");
setCookie("name2","rose2","","");
setCookie("name3","rose3","","");
</script>
</body>
</html>
cookie的局限性:
1:用户可能禁用cookie
尽管所有现代浏览器都支持cookie,但用户可能禁用了它们。
大多数用户都默认启用会话cookie,会话cookie是仅在用户浏览网站期间存在的cookie,用户关闭浏览器后,该cookie就被清除。通常还启用了更持久的cookie。但是,第三方cookies(来自第三方站点)通常是禁用的,它们用于跟踪用户对不同网站的访问,因此人们对这种cookie是侵犯隐私的。
禁用cookie时,前面用于创建cookie和获取cookie值的函数不会报错,但是所获取cookie的值为null.
这个时候主动检查是否启用了cookie,如果未启用,则采取相应的应对措施,如将用户重定向到一个不需要使用cookie的简化页面。
if(getCookieValue("name")==null){
alert("网站需要启用cookie")
}
2:数字和信息的限制
能在用户计算机上为某个网站设置的cookie的数量是有限的,每个cookie能保存的信息也是有限的。在早起的浏览器中,最多只能为每个域保存20个cookie,每个cookie的名称/值对不超过4096字节。另一个要点是,所有浏览器都设置了能保存cookie总数的上限。到达这个限制时,无论是否过期,都会删除一些旧的cookie。现代浏览器(IE7+和其他浏览器)支持的cookie总数为50个,但具体的数字在不同的浏览器中有些出入。但为了突破cookie总数的限制,可以在一个cookie中保存多条信息。
setCookie("userdetails","rose;22;10 Jan 2001","","");
var cookieValue =getCookieValue("userdetails");
cookieValue=cookieValue.split(";");
alert("name"+cookieValue[0]);
alert("age"+cookieValue[1]);
alert("last vistie"+cookieValue[2]);
由于在setCookie()函数中用escape()方法转义了cookie的值,因此cookie中的值中的分号不会与其他部分中的分号混淆。在使用getCookieValue()函数返回该cookie值时,只需将它拆分成各组成部分即可,但是要注意的是,各部分的存储顺序要记住。那么现在还有19个cookie可用。