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.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對象
①sessionStorageObject Storage Service特定於某個會話的資料，也即資料只儲存到瀏覽器關閉。儲存在sessionStorage中的資料可以跨越頁面重新整理而存在。
②sessionStorage對象綁定於某個伺服器會話，所以檔案在本地運行時不可用。儲存在sessionStorage中資料只能由最初給Object Storage Service資料的頁面訪問到，對多頁面應用有限制。
③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儲存的限制也和瀏覽器相關。