第十九章 客戶端存儲
1.cookie
①最初是在客戶端用於存儲會話信息的。
1.1 限制
①cookie在性質上是綁定在特定的域名下的。當設定了一個cookie後，再給創建它的域名發送請求時，都會包含這個cookie。
②cookie的限制：
□IE6以及更低版本限制每個域名最多20個cookie。
□IE7和之後版本每個域名最多50個cookie。
□Firefox50個
□Opera50個
□Safari和Chrome無硬性規定
③cookie尺寸限制：4096字節（加減1）的長度限制。尺寸限制到一個域下所有的cookie，而非每個cookie單獨限制。
1.2 cookie的成分
名稱、值、域、路徑、失效時間、安全標志。
1.3 JavaScript中的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讀取、寫入和山粗功能：
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中更小段的數據。也就是使用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用戶數據（不太實用，略之）
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.2 sessionStorage對象
①sessionStorage對象存儲特定於某個會話的數據，也即數據只保存到浏覽器關閉。存儲在sessionStorage中的數據可以跨越頁面刷新而存在。
②sessionStorage對象綁定於某個服務器會話，所以文件在本地運行時不可用。存儲在sessionStorage中數據只能由最初給對象存儲數據的頁面訪問到，對多頁面應用有限制。
③sessionStorage對象是Storage類型的實例。
3.3 globalStorage對象
①只在Firefox2中實現。跨越會話存儲數據，並且有特定的訪問限制。
//保存數據
globalStorage["wrox.com"].name = "Nicholas";
//獲取數據
var name = globalStorage["wrox.com"].name;
3.4 localStorage對象
①localStorage上不能指定任何訪問性規則；規則事先設定好了。為了能訪問到同一個localStorage對象，頁面必須來自同一個域名（子域名無效），使用同一種協議，在同一個端口上。
②數據保留到通過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對象中所有存儲的每個項目都是StorageItem的實例
□value屬性：被存儲的值。
□secure屬性：只有腳本使用HTTPS協議訪問頁面才可設置。通過https訪問默認為true。
3.6 storage事件
對storage對象進行修改，都會在文檔上觸發storage事件。其事件對象event有以下屬性：
□domain：進行變更的存儲的域名。
□key：進行設置或者是刪除的鍵名。
□newValue：要將該鍵設為的值，如果是刪除則為null。
□oldValue：被更改之前的值。
3.7 限制
DOM存儲的限制也和浏覽器相關。