JavaScript数据存储 Cookie篇
1.什么是cookie？
答：cookie是用于在客户端存储会话信息的。
2.cookie的组成部分？
①名称：一个唯一确定cookie的名称。建议区分大小写。cookie的名称必须是经过URL编码的。
②值：储存在cookie中的字符串值。值必须被URL编码。
③域：cookie对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息。这个值可以包含子域（subdomain，如www.wrox.com），也可以不包含它（如.wrox.com，则对于wrox.com的所有子域都有效）。如果没有明确设定，那么这个域会被认作来自设置cookie的那个域。
④路径：对于指定域中的那个路径，应该向服务器发送cookie。例如，你可以指定cookie只有从http://www.wrox.com/books/中才能访问，那么http://www.wrox.com的页面就不会发送cookie信息，即使请求都是来自同一个域的。
⑤失效时间：表示cookie何时应该被删除的时间戳。默认情况下，浏览器会话结束时即将所有cookie删除；不过也可以自己设置删除时间。这个值是个GMT格式的日期（Wdy,DD-Mon-YYYYHH:MM:SSGMT），用于指定应该删除cookie的准确时间。因此，cookie
可在浏览器关闭后依然保存在用户的机器上。如果你设置的失效日期是个以前的时间，则cookie会被立刻删除。
⑥安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器。例如，cookie信息只能发送给https://www.wrox.com，而http://www.wrox.com的请求则不能发送cookie。
3.列举一个cookie的例子？
以下是一个完整的cookie的例子，我们将把它分解开来：
Set-Cookie:name=value;expires=Mon,22-Jan-0707:10:24GMT;domain=.wrox.com;path=/;secure
①名称:name字符串表示
②值：value字符串表示
③过期时间：Mon,22-Jan-0707:10:24GMT
④域名：.wrox.com
⑤路径：当前目录/
⑥安全标志：secure
4.如何操作cookie？
varCookieUtil={
//设置cookie
set:function(name,value,expires,domain,path,secure){
varcookieText="";
cookieText+=encodeURIComponent(name)+"="+encodeURIComponent(value);
if(expiresinstanceofDate){
cookieText+=";expires="+expires.toGMTString();
}
if(path){
cookieText+=";path="+path;
}
if(domain){
cookieText+=";domain="+domain;
}
if(secure){
cookieText+=";secure";
}
document.cookie=cookieText;
},
//name=value;expires=expiration_time;path=domain_path;domain=domain_name;secure
//获取cookie
get:function(name){
varcookieName=encodeURIComponent(name)+"=",
cookieStart=document.cookie.indexOf(cookieName),
cookieValue="";
if(cookieStart>-1){
varcookieEnd=document.cookie.indexOf(";",cookieStart);
if(cookieEnd==-1){
cookieEnd=document.cookie.length;
}
cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
}
returncookieValue;
},
//删除cookie
unset:function(name,domain,path,secure){
this.set(name,"",Date(0),domain,path,secure);
}
};
//测试
CookieUtil.set("name","zhang");
varname=CookieUtil.get("name");
alert(name);//zhang
CookieUtil.unset("name");
alert(CookieUtil.get("name"));//空
5.cookie的限制
①存储数据数量有限
②保了储存在cookie中的信息只能让批准的接受者访问，而无法被其他域访问
③安全性有限
6.针对cookie数据存储少量的问题，我们提出了子cookie的概念。即在每条cookie的值中存储多条数据，用"&"隔开。
varSubCookieUtil={
/**设置一条完整的cookie
*paramname:表示cookie的名称，必填
*paramsubCookies:表示cookie的值，为一个对象，必填
*paramexpires:表示cookie的过期时间，可以不填
*paramdomain:表示cookie的域名，可以不填
*parampath:表示cookie的路径，可以不填
*paramsecure:表示cookie的安全标志，可以不填
*eg:SubCookieUtil.setAll("info",{name:"zhang",age:23});
**/
setAll:function(name,subCookies,expires,domain,path,secure){
varcookieText="",subName,cookieParts=[];
cookieText+=encodeURIComponent(name)+"=";
for(subNameinsubCookies){
cookieParts.push(encodeURIComponent(subName)+"="+encodeURIComponent(subCookies[subName]));
}
if(cookieParts.length>0){
cookieText+=cookieParts.join("&");
if(expiresinstanceofDate){
cookieText+=";expires="+expires.toGMTString();
}
if(path){
cookieText+=";path="+path;
}
if(domain){
cookieText+=";domain="+domain;
}
if(secure){
cookieText+=";secure";
}
}else{
cookieText+=";expires="+Date(0).toGMTString();
}
document.cookie=cookieText;
},
/**设置一条子cookie
*paramname:表示cookie的名称，必填
*paramsubName:表示子cookie的名称，必填
*paramvalue:表示子cookie的值，必填
*paramexpires:表示cookie的过期时间，可以不填
*paramdomain:表示cookie的域名，可以不填
*parampath:表示cookie的路径，可以不填
*paramsecure:表示cookie的安全标志，可以不填
*eg:SubCookieUtil.set("info","sex","boy");
**/
set:function(name,subName,value,expires,domain,path,secure){
varcookies=this.getAll(name)||{};
cookies[subName]=value;
this.setAll(name,cookies,expires,domain,path,secure);
},
/**读取一条完整cookie
*paramname:表示cookie的名称，必填
*return:一个cookie对象
*eg:SubCookieUtil.getAll("info");
**/
getAll:function(name){
varcookieName=encodeURIComponent(name)+"=",
cookieStart=document.cookie.indexOf(cookieName),
cookieValue="",i,len,subCookies,parts,result={};
if(cookieStart>-1){
varcookieEnd=document.cookie.indexOf(";",cookieStart);
if(cookieEnd==-1){
cookieEnd=document.cookie.length;
}
cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
if(cookieValue.length>0){
subCookies=cookieValue.split("&");
for(i=0,len=subCookies.length;i<len;i++){
parts=subCookies[i].split("=");
result[decodeURIComponent(parts[0])]=decodeURIComponent(parts[1]);
}
returnresult;
}
}
returnnull;
},
/**获取一条子cookie的值
*paramname:表示cookie的名称，必填
*paramsubName:表示子cookie的名称
*return:一个子cookie的值
*eg:SubCookieUtil.get("info","name");
**/
get:function(name,subName){
varcookies=this.getAll(name);
if(cookies){
returncookies[subName];
}else{
returnnull;
}
},
/**删除一条完整cookie
*paramname:表示cookie的名称，必填
*paramdomain:表示cookie的域名，可以不填
*parampath:表示cookie的路径，可以不填
*paramsecure:表示cookie的安全标志，可以不填
*eg:SubCookieUtil.unsetAll("info");
**/
unsetAll:function(name,domain,path,secure){
this.setAll(name,"",Date(0).toGMTString(),domain,path,secure);
},
/**删除一条子cookie
*paramname:表示cookie的名称，必填
*paramsubName:表示子cookie的名称，必填
*paramdomain:表示cookie的域名，可以不填
*parampath:表示cookie的路径，可以不填
*paramsecure:表示cookie的安全标志，可以不填
*eg:SubCookieUtil.unset("info","name");
**/
unset:function(name,subName,domain,path,secure){
varcookies=this.getAll(name);
if(cookies){
deletecookies[subName];
this.setAll(name,cookies,null,domain,path,secure);
}
}
};
//测试：
varzhang={
name:"zhang",
age:23,
height:"178cm",
weight:"66kg"
}
//设置一条完整的cookie
SubCookieUtil.setAll("zhang",zhang);
//获取一条完整的cookie
varzhang=SubCookieUtil.getAll("zhang");
alert(zhang.weight);//66kg
//再为张添加一个子cookie
SubCookieUtil.set("zhang","sport","basketball");
//获取子cookie
alert(SubCookieUtil.get("zhang","sport"));//basketball
//删除一条子cookie
SubCookieUtil.unset("zhang","age");
alert(SubCookieUtil.get("zhang","age"));//undefined
//删除一条完整的cookie
SubCookieUtil.unsetAll("zhang");
alert(SubCookieUtil.getAll("zhang"));//报错，因为已经被删除
以上就是本文的全部内容，希望对大家的学习有所帮助。