第十九章 客戶端存儲
1.cookie
①最初是在客戶端用于存儲會話信息的。
1.1 限制
①cookie在性質(zhì)上是綁定在特定的域名下的。當(dāng)設(shè)定了一個cookie后，再給創(chuàng)建它的域名發(fā)送請求時，都會包含這個cookie。
②cookie的限制：
□IE6以及更低版本限制每個域名最多20個cookie。
□IE7和之后版本每個域名最多50個cookie。
□Firefox50個
□Opera50個
□Safari和Chrome無硬性規(guī)定
③cookie尺寸限制：4096字節(jié)（加減1）的長度限制。尺寸限制到一個域下所有的cookie，而非每個cookie單獨(dú)限制。
1.2 cookie的成分
名稱、值、域、路徑、失效時間、安全標(biāo)志。
1.3 JavaScript中的cookie
JavaScript操作cookie是通過BOM的document.cookie屬性。
①當(dāng)用來獲取屬性時，document.cookie返回當(dāng)前頁面可用的所有cookie的字符串，一系列由分號隔開的名-值對。
name1=value;name2=value2;name3=value3
所有名字和值都經(jīng)URL編碼，所以必須使用decodeURIComponent()來解碼。
②用于設(shè)置值時，document.cookie屬性可以設(shè)為一個新cookie字符串。設(shè)置document.cookie并不會覆蓋cookie，除非設(shè)置的cookie名已經(jīng)存在。設(shè)置前必須用encodeURIComponent()編碼。
③沒有刪除cookie的直接方法。需要使用相同的路徑、域和安全選項(xiàng)再次設(shè)置cookie，并將失效時間設(shè)為過去的時間。
□cookie讀取、寫入和山粗功能：
var CookieUtil = {
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;
},
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=" + domian;
}
if(secure){
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset : function(name, path, domain, secure){
this.set(name, "", new Date(0), path, domain, secure);
}
};
1.4 子cookie
①子cookie是存放單個cookie中更小段的數(shù)據(jù)。也就是使用cookie值來存儲多個名稱-值對。
name=name1=value1&name2=value2&name3=value3
□操作子cookie，get、getAll、set、setAll、unset、unsetAll：
var subCookieUtil = {
get : function(name, subName){
var subCookies = this.getAll(name);
if(subCookies){
return subCookies[subName];
}else{
return null;
}
},
getAll : function(name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null,
result = {};
if(cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";",cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = document.cookie.substring(cookieStart + cookieName.length,cookieEnd);
if(cookieValue.length > 0){
var subCookies = cookieValue.split("&");
for(var i=0, len=subCookies.length; i<len; i++){
var parts = subCookies[i].split("=");
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
}
return result;
}
}
return null;
},
Set : function(name, subName, value, expires, path, domain, secure){
Var subCookies = this.getAll(name) || {};
Subcookies[subName] = value;
This.setAll(name, subcookies, expires, path, domain, secure);
},
setAll : function(name, subcookies, expires, path, domain, secure){
var cookieText = encodeURIComponent(name) + "=";
var subcookieParts = new Array();
for(var subName in subcookies){
if(subName.length>0 && subcookies.hasOwnProperty(subName)){
subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));
}
}
if(cookieParts.length>0){
cookieText += subcookieParts.join("&");
if(expires instanceof Date){
cookieText += ";expires=" + expires.toGMTString();
}
if(path){
cookieText += ";path=" + path;
}
if(domain){
cookieText += ";path" + path;
}
if(secure){
cookieText += ";secure";
}
}else{
cookieText += ";expires=" + (new Date(0)).toGMTString();
}
document.cookie = cookieText;
},
unset : function(name, subName, path, domain, secure){
var subcookies = this.getAll(name);
if(subcookies){
delete subcookies[subName];
this.setAll(name, subcookies, null, path, domain, secure);
}
},
unsetAll : function(name, path, domain, secure){
this.setAll(name, null, new Date(0), path, domain, secure);
}
}
2.IE用戶數(shù)據(jù)（不太實(shí)用，略之）
3.DOM存儲機(jī)制
①DOM存儲兩個目標(biāo)
□提供一種在cookie之外存儲會話數(shù)據(jù)的途徑。
□提供一種存儲大量可以跨越會話存在的數(shù)據(jù)的機(jī)制。
②支持情況：
□Firefox2支持部分
□IE8+、Safari3.1+、Chrome1.0+、Firefox3.1+全部實(shí)現(xiàn)。
3.1 存儲類型
①Storage類型用來存儲最大限（因?yàn)g覽器而異）的名值對。Storage的實(shí)例和其他對象行為一樣，有下列額外的方法。
□clear()：刪除所有值。
□getItem(name)：根據(jù)指定的名字name獲取相應(yīng)的值。
□key(index)：在指定的數(shù)字位置獲取該位置的名字。
□removeItem(name)：刪除由名字name指定的名值對。
□setItem(name, value)：為指定的名字name設(shè)置一個對應(yīng)的值。
□可通過屬性訪問值。
3.2 sessionStorage對象
①sessionStorage對象存儲特定于某個會話的數(shù)據(jù)，也即數(shù)據(jù)只保存到瀏覽器關(guān)閉。存儲在sessionStorage中的數(shù)據(jù)可以跨越頁面刷新而存在。
②sessionStorage對象綁定于某個服務(wù)器會話，所以文件在本地運(yùn)行時不可用。存儲在sessionStorage中數(shù)據(jù)只能由最初給對象存儲數(shù)據(jù)的頁面訪問到，對多頁面應(yīng)用有限制。
③sessionStorage對象是Storage類型的實(shí)例。
3.3 globalStorage對象
①只在Firefox2中實(shí)現(xiàn)?？缭綍挻鎯?shù)據(jù)，并且有特定的訪問限制。
//保存數(shù)據(jù)
globalStorage["wrox.com"].name = "Nicholas";
//獲取數(shù)據(jù)
var name = globalStorage["wrox.com"].name;
3.4 localStorage對象
①localStorage上不能指定任何訪問性規(guī)則；規(guī)則事先設(shè)定好了。為了能訪問到同一個localStorage對象，頁面必須來自同一個域名（子域名無效），使用同一種協(xié)議，在同一個端口上。
②數(shù)據(jù)保留到通過JavaScript刪除或者是用戶清除瀏覽器緩存。
用例：
localStorage.setItema("name","Nicholas");
localStorage.book = "Profession JavaScript";
var name = localStorage.getItem("name");
var book = localStorage.book;
③兼容globalStorage：
function getLocalStorage(){
if(typeof localStorage == "object"){
return localStorage;
}else if(typeof globalStorage == "object"){
retrun globalStorage[location,host];
}else{
throw new Error("no localstorage");
}
3.5 StorageItem類型
①Storage對象中所有存儲的每個項(xiàng)目都是StorageItem的實(shí)例
□value屬性：被存儲的值。
□secure屬性：只有腳本使用HTTPS協(xié)議訪問頁面才可設(shè)置。通過https訪問默認(rèn)為true。
3.6 storage事件
對storage對象進(jìn)行修改，都會在文檔上觸發(fā)storage事件。其事件對象event有以下屬性：
□domain：進(jìn)行變更的存儲的域名。
□key：進(jìn)行設(shè)置或者是刪除的鍵名。
□newValue：要將該鍵設(shè)為的值，如果是刪除則為null。
□oldValue：被更改之前的值。
3.7 限制
DOM存儲的限制也和瀏覽器相關(guān)。

最新評論