用途:在客戶(hù)端的磁盤(pán)上以很小的文件保存一定量的數(shù)據(jù)士复。
-
cookie的內(nèi)容
document.cookie='name=值;[expires=失效時(shí)間;
path=路徑訪(fǎng)問(wèn);domain=域名訪(fǎng)問(wèn);secure=安全的https限制通信]'
上面的代碼是設(shè)置cookie的格式秦驯，cookie是document的屬性锻霎，可以通過(guò)為其賦值的形式設(shè)置cookie值护昧。[]內(nèi)的名值對(duì)兒是可選屬性坚踩。 - 名稱(chēng)
一個(gè)唯一確定的cookie名稱(chēng)呈础，必須經(jīng)過(guò)URL編碼。 - 值
是名稱(chēng)對(duì)應(yīng)的值渊胸，必須被URL編碼
document.cookie='user='+encodeURIComponent('杜杜');
同xml一樣旬盯，需要對(duì)中文字符進(jìn)行編碼。 - 失效時(shí)間
表示cookie何時(shí)應(yīng)該被刪除的時(shí)間戳。表示在這個(gè)時(shí)間范圍內(nèi)胖翰，每次訪(fǎng)問(wèn)該網(wǎng)站都會(huì)向該網(wǎng)站的服務(wù)器發(fā)送這個(gè)已經(jīng)保存在本地的cookie值接剩，但是如果這個(gè)日期是以前的日期，那么該cookie值就會(huì)被刪除萨咳。
var date=new Date();
date.setDate(date.getDate()+7);
document.cookie='user='+encodeURIComponent('杜杜')+';expires='+date.toGMTString();
//已經(jīng)寫(xiě)入磁盤(pán)啦 -
路徑
只有訪(fǎng)問(wèn)在服務(wù)器內(nèi)指定的那個(gè)路徑下的文件時(shí)懊缺，才會(huì)向該文件發(fā)送cookie，否則訪(fǎng)問(wèn)其他路徑下的文件培他，就不會(huì)向其發(fā)送該cookie鹃两。
點(diǎn)開(kāi)大圖，這是hao123網(wǎng)站cookie的信息舀凛，發(fā)現(xiàn)基本上路徑都是與該網(wǎng)頁(yè)在一個(gè)路徑下的怔毛。當(dāng)然，如果設(shè)置了其他的路徑腾降，那么該網(wǎng)頁(yè)就訪(fǎng)問(wèn)不了他設(shè)置的cookie信息。
2015-02-07_205628.jpg - 域
默認(rèn)不設(shè)置時(shí)碎绎，該值就是請(qǐng)求所在域螃壤，如果domain設(shè)置成了該域名的二級(jí)子域下，那么不僅其他子域名訪(fǎng)問(wèn)不到該cookie筋帖，連一級(jí)域名也無(wú)法訪(fǎng)問(wèn)奸晴。 - 安全標(biāo)志
document.cookie='user='+encodeURIComponent('杜杜')+';secure';
一旦設(shè)置了安全標(biāo)志，那么cookie只有在使用SSl時(shí)日麸，才發(fā)送到服務(wù)器寄啼。 -
封裝cookie
var cookieUtil={
set :function(name,value,expires,path,domain,secure){
var cookieText=encodeURIComponent(name)+'='+
encodeURIComponent(value);
if(expires instanceof Date){
cookieText+=';expires='+expires.toGMTString();
}
if(path){
cookieText+=';path='+path;
}
if(domain){
cookieText+=';domain='+domain;
}
if(secure){
cookieText+=';secure';
}
document.cookie=cookieText;
},
get:function(name){
var cookieName=encodeURIComponent(name)+'=',
cookieStart=document.cookie.indexOf(cookieName),
cookieValue=null;
if(cookieStart>-1){
var cookieEnd=document.cookie.indexOf(';',cookieStart);
if(cookieEnd==-1){
cookieEnd=document.cookie.length;
}
cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd))
}
return cookieValue;
},
unset:function(name,path,domain,secure){
this.set(name,'',new Date(0),domain,path)
}
}
function setCookieDate(day){
var date=null;
if(typeof day=='number'&&day>0){
date=new Date();
date.setDate(date.getDate()+day);
}else{
throw new Error('!!')
}
return date;
}
cookieUtil.set('name','杜杜',setCookieDate(7));
cookieUtil.set('user','lala',setCookieDate(7));
cookieUtil.set('email','126.com',setCookieDate(7));
這個(gè)封裝，將設(shè)置cookie代箭，讀取cookie墩划，消除cookie都封裝在一個(gè)對(duì)象里。
特點(diǎn)：
1嗡综、在設(shè)置cookie值時(shí)乙帮，需要判斷失效時(shí)間expires，不僅要判斷他是否為空极景，而且還要判斷他是否是Date類(lèi)型的實(shí)例察净。
2、取得cookie值時(shí)盼樟，是根據(jù)傳遞的cookie名稱(chēng)來(lái)得出該名稱(chēng)對(duì)應(yīng)的值氢卡。
上例子設(shè)立了三個(gè)名值對(duì)，打印cookie信息時(shí)晨缴，出現(xiàn)的是一個(gè)組合的字符串译秦，
2015-02-07_212333.jpg
所以當(dāng)采用get方式，來(lái)獲取信息時(shí)，需要傳遞某個(gè)名稱(chēng)來(lái)查找對(duì)應(yīng)的信息诀浪。
alert(cookieUtil.get('name'))//杜杜
3棋返、讀取cookie值時(shí)，需要熟練的使用字符串的方法雷猪。 - cookie限制
- 每個(gè)域的cookie總數(shù)是有限的睛竣，IE6以及更低版本限制每個(gè)域名最多20個(gè)，然后其他瀏覽器都相對(duì)多一點(diǎn)求摇，但是為了兼容性考慮射沟，也就得限制在20多個(gè)啦。
- 每個(gè)cookie的長(zhǎng)度限制在4095B以?xún)?nèi)与境。
- 由于cookie是存在客戶(hù)端計(jì)算機(jī)上的验夯，所以安全性不太高。
-
IE5中的用戶(hù)數(shù)據(jù)
考慮到這款瀏覽器的市場(chǎng)份額摔刁，所以挥转，我就忽略啦 -
HTML5中web存儲(chǔ)機(jī)制
首先需要了解一下Storage類(lèi)型，該類(lèi)型提供最大的存儲(chǔ)空間來(lái)存儲(chǔ)名值對(duì)兒共屈，該類(lèi)型為所有他的實(shí)例定義了如下方法：
clear():刪除所有值绑谣；但是火狐沒(méi)有實(shí)現(xiàn)。
getItem(name):根據(jù)制定的名字name獲取對(duì)應(yīng)的值拗引。
key(index):獲得index位置處的值的名字借宵。
removeItem(name):刪除由name制定的名值對(duì)。
setItem(name,value):為制定的name設(shè)置一個(gè)對(duì)應(yīng)的值矾削。
還可以通過(guò)delete操作符進(jìn)行刪除某個(gè)名值對(duì)壤玫。（webkit不支持）
還可以使用length屬性來(lái)判斷有多少名值對(duì)。
【然后呢】該類(lèi)型實(shí)例的對(duì)象哼凯，可以進(jìn)行存儲(chǔ)數(shù)據(jù)欲间。IE8+，F(xiàn)F3.5+,chrome4+,Opera 10.5+ - sessionStorage該對(duì)象是Storage的一個(gè)實(shí)例断部，存儲(chǔ)特定于某個(gè)會(huì)話(huà)的數(shù)據(jù)括改，也就是只保存到瀏覽器關(guān)閉。該對(duì)象可以跨越頁(yè)面刷新而存在家坎，同時(shí)嘱能，如果瀏覽器支持，瀏覽器崩潰后重啟依然可用（IE不支持）虱疏。
存儲(chǔ)在sessionStorage中的數(shù)據(jù)只能由最初給對(duì)象存儲(chǔ)數(shù)據(jù)的頁(yè)面訪(fǎng)問(wèn)惹骂，所以對(duì)于多頁(yè)面應(yīng)用有限制。
從兼容的角度考慮做瞪，只介紹大多數(shù)瀏覽器都支持的方法对粪。- 存儲(chǔ)數(shù)據(jù)
sessionStorage.setItem('name','dudu');//使用方法存儲(chǔ)數(shù)據(jù),推薦
sessionStorage.name='dudu';//使用屬性存儲(chǔ)數(shù)據(jù) - 讀取數(shù)據(jù)
var name=sessionStorage.getItem('name');
var name=sessionStorage.name; - 刪除數(shù)據(jù)
sessionStorage.removeItem('name'); - 迭代 sessionStorage中的值
第一種方法利用length屬性以及key()方法
第二種方法使用for in 循環(huán)
【總結(jié)】這個(gè)方法是適合小段數(shù)據(jù)存儲(chǔ)右冻，且無(wú)法跨越會(huì)話(huà)存儲(chǔ)數(shù)據(jù)。
- 存儲(chǔ)數(shù)據(jù)
- globalStorage該對(duì)象不是是Storage的實(shí)例著拭，但是當(dāng)為該對(duì)象指定域名使才是Storage的實(shí)例纱扭。
可以通過(guò)location.host來(lái)作為域名，比較安全儡遮。
例如
globalStorage[location.host]
這樣指定域名（子域名訪(fǎng)問(wèn)無(wú)效）后乳蛾，就具備了Storage的實(shí)例的全部特征。該對(duì)象是用來(lái)跨會(huì)話(huà)存儲(chǔ)數(shù)據(jù)的鄙币。如果不使用removeItem()或者delete來(lái)刪除肃叶，或者用戶(hù)未清除瀏覽器緩存，存儲(chǔ)在該對(duì)象屬性中的數(shù)據(jù)會(huì)一直保存在磁盤(pán)上十嘿，所以非常適合客戶(hù)端存儲(chǔ)文檔因惭，或者長(zhǎng)期保存用戶(hù)偏好。
但是正是由于該對(duì)象需要額外指定域名所以比較麻煩绩衷，所以在修訂過(guò)的html5規(guī)范中用localStorage取代了globalStorage蹦魔。 - localStorage該對(duì)象的設(shè)置讀取以及刪除數(shù)據(jù)的方式與sessionStorage一致。
為了兼容只支持globalStorage的瀏覽器咳燕，可以使用以下函數(shù)
function getLoacalStorage(){
if(typeof localStorage=='object'){
return localStorage;
}else if(typeof globalStrage=='object'){
return globalStorage[location.host];
}else{
throw new Error('local storage not available')
}
}
var storage=getLoacalStorage();
當(dāng)然勿决，任何方法都是有限制的，一般來(lái)說(shuō)對(duì)存儲(chǔ)空間大小的限制一般都是以每個(gè)來(lái)源（協(xié)議迟郎、域。端口）為單位的聪蘸。每個(gè)來(lái)源都有固定大小的空間用于保存自己的數(shù)據(jù)宪肖，考慮到這個(gè)限制，就要注意分析健爬，和控制每個(gè)來(lái)源有多少頁(yè)面需要保存數(shù)據(jù)控乾。“2.5MB”
