JavaScript高级程序设计客户端存储学习笔记

第十九章客户端存储
1.cookie
①最初是在客户端用于存储会话信息的。
1.1限制
①cookie在性质上是绑定在特定的域名下的。当设定了一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie。
②cookie的限制：
□IE6以及更低版本限制每个域名最多20个cookie。
□IE7和之后版本每个域名最多50个cookie。
□Firefox50个
□Opera50个
□Safari和Chrome无硬性规定
③cookie尺寸限制：4096字节（加减1）的长度限制。尺寸限制到一个域下所有的cookie，而非每个cookie单独限制。
1.2cookie的成分
名称、值、域、路径、失效时间、安全标志。
1.3JavaScript中的cookie
JavaScript操作cookie是通过BOM的document.cookie属性。
①当用来获取属性时，document.cookie返回当前页面可用的所有cookie的字符串，一系列由分号隔开的名-值对。
name1=value;name2=value2;name3=value3
所有名字和值都经URL编码，所以必须使用decodeURIComponent()来解码。
②用于设置值时，document.cookie属性可以设为一个新cookie字符串。设置document.cookie并不会覆盖cookie，除非设置的cookie名已经存在。设置前必须用encodeURIComponent()编码。
③没有删除cookie的直接方法。需要使用相同的路径、域和安全选项再次设置cookie，并将失效时间设为过去的时间。
□cookie读取、写入和山粗功能：
varCookieUtil={
get:function(name){
varcookieName=encodeURIComponent(name)+"=",
cookieStart=document.cookie.indexOf(cookieName),
cookieValue=null;
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;
},
set:function(name,value,expires,path,domain,secure){
varcookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);
if(expiresinstanceofDate){
cookieText+=";expires="+expires.toGMTString();
}
if(path){
cookieText+=";path="+path;
}
if(domain){
cookieText+=";domain="+domian;
}
if(secure){
cookieText+=";secure";
}
document.cookie=cookieText;
},
unset:function(name,path,domain,secure){
this.set(name,"",newDate(0),path,domain,secure);
}
};
1.4子cookie
①子cookie是存放单个cookie中更小段的数据。也就是使用cookie值来存储多个名称-值对。
name=name1=value1&name2=value2&name3=value3
□操作子cookie，get、getAll、set、setAll、unset、unsetAll：
varsubCookieUtil={
get:function(name,subName){
varsubCookies=this.getAll(name);
if(subCookies){
returnsubCookies[subName];
}else{
returnnull;
}
},
getAll:function(name){
varcookieName=encodeURIComponent(name)+"=",
cookieStart=document.cookie.indexOf(cookieName),
cookieValue=null,
result={};
if(cookieStart>-1){
varcookieEnd=document.cookie.indexOf(";",cookieStart);
if(cookieEnd==-1){
cookieEnd=document.cookie.length;
}
cookieValue=document.cookie.substring(cookieStart+cookieName.length,cookieEnd);
if(cookieValue.length>0){
varsubCookies=cookieValue.split("&");
for(vari=0,len=subCookies.length;i<len;i++){
varparts=subCookies[i].split("=");
result[decodeURIComponent(parts[0])]=decodeURIComponent(parts[1]);
}
returnresult;
}
}
returnnull;
},
Set:function(name,subName,value,expires,path,domain,secure){
VarsubCookies=this.getAll(name)||{};
Subcookies[subName]=value;
This.setAll(name,subcookies,expires,path,domain,secure);
},
setAll:function(name,subcookies,expires,path,domain,secure){
varcookieText=encodeURIComponent(name)+"=";
varsubcookieParts=newArray();
for(varsubNameinsubcookies){
if(subName.length>0&&subcookies.hasOwnProperty(subName)){
subcookieParts.push(encodeURIComponent(subName)+"="+encodeURIComponent(subcookies[subName]));
}
}
if(cookieParts.length>0){
cookieText+=subcookieParts.join("&");
if(expiresinstanceofDate){
cookieText+=";expires="+expires.toGMTString();
}
if(path){
cookieText+=";path="+path;
}
if(domain){
cookieText+=";path"+path;
}
if(secure){
cookieText+=";secure";
}
}else{
cookieText+=";expires="+(newDate(0)).toGMTString();
}
document.cookie=cookieText;
},
unset:function(name,subName,path,domain,secure){
varsubcookies=this.getAll(name);
if(subcookies){
deletesubcookies[subName];
this.setAll(name,subcookies,null,path,domain,secure);
}
},
unsetAll:function(name,path,domain,secure){
this.setAll(name,null,newDate(0),path,domain,secure);
}
}
2.IE用户数据（不太实用，略之）
3.DOM存储机制
①DOM存储两个目标
□提供一种在cookie之外存储会话数据的途径。
□提供一种存储大量可以跨越会话存在的数据的机制。
②支持情况：
□Firefox2支持部分
□IE8+、Safari3.1+、Chrome1.0+、Firefox3.1+全部实现。
3.1存储类型
①Storage类型用来存储最大限（因浏览器而异）的名值对。Storage的实例和其他对象行为一样，有下列额外的方法。
□clear()：删除所有值。
□getItem(name)：根据指定的名字name获取相应的值。
□key(index)：在指定的数字位置获取该位置的名字。
□removeItem(name)：删除由名字name指定的名值对。
□setItem(name,value)：为指定的名字name设置一个对应的值。
□可通过属性访问值。
3.2sessionStorage对象
①sessionStorage对象存储特定于某个会话的数据，也即数据只保存到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在。
②sessionStorage对象绑定于某个服务器会话，所以文件在本地运行时不可用。存储在sessionStorage中数据只能由最初给对象存储数据的页面访问到，对多页面应用有限制。
③sessionStorage对象是Storage类型的实例。
3.3globalStorage对象
①只在Firefox2中实现。跨越会话存储数据，并且有特定的访问限制。
//保存数据
globalStorage["wrox.com"].name="Nicholas";
//获取数据
varname=globalStorage["wrox.com"].name;
3.4localStorage对象
①localStorage上不能指定任何访问性规则；规则事先设定好了。为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。
②数据保留到通过JavaScript删除或者是用户清除浏览器缓存。
用例：
localStorage.setItema("name","Nicholas");
localStorage.book="ProfessionJavaScript";
varname=localStorage.getItem("name");
varbook=localStorage.book;
③兼容globalStorage：
functiongetLocalStorage(){
if(typeoflocalStorage=="object"){
returnlocalStorage;
}elseif(typeofglobalStorage=="object"){
retrunglobalStorage[location,host];
}else{
thrownewError("nolocalstorage");
}
3.5StorageItem类型
①Storage对象中所有存储的每个项目都是StorageItem的实例
□value属性：被存储的值。
□secure属性：只有脚本使用HTTPS协议访问页面才可设置。通过https访问默认为true。
3.6storage事件
对storage对象进行修改，都会在文档上触发storage事件。其事件对象event有以下属性：
□domain：进行变更的存储的域名。
□key：进行设置或者是删除的键名。
□newValue：要将该键设为的值，如果是删除则为null。
□oldValue：被更改之前的值。
3.7限制
DOM存储的限制也和浏览器相关。