摘要：應用緩存的應用緩存，或者簡稱為，是專門為開發離線應用而設計的。應用緩存還有很多相關的事件，表示其狀態的改變。數據存儲，通常直接叫做，最初是在客戶端用于存儲會話信息的。也就是使用值來存儲多個名稱值對兒。

所謂Web離線應用，就是在設備不能上網的情況下仍然可以運行的應用。開發離線Web應用需要幾個步驟：
（1）確保應用知道設備是否能上網；
（2）應用還必須能訪問一定的資源（圖像、JavaScript、CSS等）；
（3）必須有一塊本地空間用于保存數據，無論能否上網都不妨礙讀寫。

HTML5定義了一個navigator.onLine屬性，這個屬性值為true表示設備能上網，值為false表示設備離線。
多帶帶使用navigator.onLine屬性不能確定網絡是否連通。即便如此，在請求發生錯誤的情況下，檢測這個屬性仍然是管用的。

if(navigator.onLine) {
    //正常工作
} else {
    //執行離線狀態時的任務
}

除了navigator.onLine屬性之外，為了更好地確定網絡是否可用，HTML5還定義了兩個事件：onLine和offline。當網絡從離線變為在線或者從在線變為離線時，分別觸發這兩個事件。這兩個事件在window對象上觸發。

//從離線變為在線
EventUtil.addHandler(window, "online", function() {
    alert("Online");
});
//從現在變為離線
EventUtil.addHandler(window, "offline", function() {
    alert("Offline");
});

為了檢測應用是否離線，在網絡加載后，最好先通過navigator.onLine取得初始的狀態。然后，就是通過上述兩個事件來確定網絡連接狀態是否變化。當上述事件觸發時，navigator.onLine屬性的值也會改變。

（1）HTML5的應用緩存，或者簡稱為appache，是專門為開發離線Web應用而設計的。Appcache就是從瀏覽器的緩存中分出來的一塊緩存區。要想在這個緩存中保存數據，可使用一個描述文件（manifest file）列出要下載和緩存的資源。

CACHE MANIFEST
  #Comment

  file.js
  file.css

要將描述文件與頁面關聯起來，可以在中的manifest屬性中指定這個文件的路徑，例如

以上代碼告訴頁面，/offline.manifest中包含著描述文件。

（2）雖然應用緩存的意圖是確保離線時資源可用，但也有相應的JavaScript API讓我們知道它都在做什么，這個API的核心是applicationCache對象，這個對象有一個status屬性，屬性的值是常量，表示應用緩存的如下當前狀態。

0：無緩存，即沒有與頁面相關的應用緩存

1：閑置，即應用緩存未得到更新

2：檢查中，即正在下載描述文件并檢查更新

3：下載中，即應用緩存正在下載描述文件中的指定資源

4：更新完成，即應用緩存已經更新了資源，而且所有資源都已下載完畢，可以通過swapCache()來使用了

5：廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問緩存。

（3）應用緩存還有很多相關的事件，表示其狀態的改變。以下是這些事件：

checking：在瀏覽器為應用緩存查找更新時觸發

error：在檢查更新或下載資源其期間發生錯誤時觸發

noupdate：在檢查描述文件發現文件無變化時觸發

downloading：在開始下載應用緩存資源時觸發

progress：在文件下載應用緩存的過程中持續不斷的觸發

updateready：在頁面新的應用緩存下載完畢且可以通過swapCache()使用時觸發

cached:在應用緩存完整可用時觸發

一般來講，這些時間會隨著頁面加載按上述順序依次觸發，不過通過調用update()方法也可以手工干預，讓應用緩存為檢查更新而觸發上述事件。

applicationCache.update();

update()已經一經調用，應用緩存就會去檢查描述文件是否更新（觸發checking事件），然后就像頁面剛剛加載一樣，繼續執行后續操作。如果觸發了cached事件，就說明應用緩存已經準備就緒，不會再發生其他操作了。如果觸發了updateready事件，則說明新版本的應用緩存已經可用，而此時你需要調用swapCache()來啟用新應用緩存。

Event.addHandler(applicationCache, "updateready", function() {
    applicationCache.swapCache();
});

HTTP Cookie，通常直接叫做cookie，最初是在客戶端用于存儲會話信息的。該標準要求服務器對任意HTTP請求發送Set-Cookies HTTP頭作為響應的一部分，其中包含會話信息。例如，這種服務器響應頭可能如下：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

這個HTTP響應設置以name為名稱，以value為值得一個cookie，名稱和值在傳送時都必須是URL編碼的。瀏覽器會存儲這樣的會話信息，并在這之后，通過為每個請求添加Cookie HTTP頭將信息發送回服務器。

GET /index.html HTTP/1.1 
Cookie: name=value
Other-header: other-header-value

發送回服務器的額外信息可以用于唯一驗證客戶來自于發送的哪個請求。

1、限制（綁定在特定域名下；數量限制；尺寸限制）

（1）cookie在性質上是綁定在特定的域名下的。當設定了一個cookie后，再給創建它的域名發送請求時，都會包含這個cookie。這個限制確保里存儲在cookie中的信息只能讓批準的接受者訪問，而無法被其他域訪問。
（2）每個域的cookie總數總是有限的，當超過單個域名限制之后還要再設置cookie，瀏覽器就會清除以前設置的cookie。IE和Opera會刪除最近最少使用過的cookie，騰出空間給新設置的cookie。Firefox看上去好像是隨機決定要清除哪個cookie，所以考慮cookie限制非常重要，以免出現不可預期的后果。
（3）瀏覽器中對于cookie的尺寸也有限制。尺寸限制影響到一個域下所有的cookie，而并非每個cookie多帶帶限制。如果你嘗試創建超過最大尺寸限制的cookie，那么該cookie會被悄無聲息地丟掉。

2、cookie的構成

cookie由瀏覽器保存的一下幾塊信息構成。（名稱、值、域、路徑、失效時間、安全標志）

名稱：一個唯一確定cookie的名稱。cookie名稱是不區分大小寫的，但是實踐中最好將cookie名稱看作是區分大小寫的。cookie的名稱必須是經過URL編碼的。

值：存儲在cookie中的字符串值。值必須被URL編碼。

域：cookie對于哪個域是有效的。所有向該域發送的請求都會包含這個cookie信息。這個值可以包含子域（subdomain,如www.wrox.com），也可以不包含它（如.wrox.com,則對于wrox.com的所有子域都有效）。如果沒有明確設定，那么這個域會被認作來自設置cookie的那個域。

路徑：對于指定域中的那個路徑，應該向服務器發送cookie。例如，你可以指定cookie只有從http://www.wrox.com/books/ 中才能訪問，那么http://www.wrox.com 的頁面就不會發送cookie信息，即使請求都是來自于同一個域的。

失效時間：表示cookie何時應該被刪除的時間戳（也就是，何時應該停止向服務器發送這個cookie）。默認情況下，瀏覽器會話結束時即將所有cookie刪除；不過也可以自己設置刪除時間。這個值是個GMT格式的日期，用于指定應該刪除cookie的準確時間。cookie可在瀏覽器關閉后依然保存在用戶的機器上。如果你設置的失效日期是個以前的時間，則cookie會被立即刪除。

安全標志：指定后，cookie只有在使用SSL連接的時候才發送到服務器。例如，cookie信息只能發送給https://www.wrox.com，而 http://www.wrox.com 的請求則不能發送。

每一段信息都作為Set-Cookie頭的一部分，使用分號加空格分隔每一段，如下例所示：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com
Other-header: other-header-value

secure標志是cookie中唯一一個非名值對兒的部分，直接包含一個secure單詞。

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; domain=.wrox.com; path=/; secure
Other-header: other-header-value

這里創建了一個對于所有wrox.com的子域和域名下（由path參數指定的）所有頁面都是有效的cookie。因為設置了secure標志，這個cookie只能通過SSL連接才能傳輸。

尤其要注意，域、路徑、失效時間和secure標志都是服務器給瀏覽器的指示，以指定何時應該發送cookie。這些參數并不會作為發送到服務器的cookie信息的一部分，只有名值對兒才會被發送。

3、JavaScript中的cookie

JavaScript中處理cookie有些復雜，因為BOM的document.cookie屬性比較獨特，它會因為使用它的不同而表現出不同的行為。

當用來獲取屬性值時，document.cookie返回當前頁面可用的（根據cookie的域、路徑、失效時間和安全設置）所有cookie的字符串，一系列由分號隔開的名值對兒。

當用于設置值的時候，document.cookie屬性可以設置為一個新的cookie字符串。這個cookie字符串會被解釋并添加到現有的cookie集合中。設置document.cookie并不會覆蓋cookie，除非設置cookie的名稱已經存在。設置cookie的格式如下，和Set-Cookie頭中使用的格式一樣。

name=value; expires=expiration_time; path=domain_name; secure

這些參數中，只有cookie的名字和值是必需的。如：最好每次設置cookie時都像下面這樣使用encodeURI-Component();

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas");

要給被創建的cookie指定額外的信息，只要將參數追加到該字符串，和Set-Cookie頭中的格式一樣，如下所示：

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas") + "; domain=.wrox.com; path=/";

由于JavaScript中讀寫cookie不是非常直觀，常常需要寫一些函數來簡化cookie功能。基本的cookie操作有3種：讀取、寫入和刪除。

所有名字和值都是經過URL編碼的，所有必須使用decodeURIComponent()來解碼

var CookieUtil = {
    get: function(name){
    //查找cookie名加上等于號的位置。如果找到了，那么使用indexOf()查找該位置之后的第一個分號（表示了該cookie的結束位置）。如果沒有找到分號，則表示該cookie是字符串中的最后一個，則余下的字符串都是cookie的值。該值使用decodeURIComponent()進行解碼并最后返回。如果沒有發現cookie，則返回null。
        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=" + domain;
        }

        if(secure) {
            cookieText += "; secure";
        }

        document.cookie = cookieText;
    },
    //沒有刪除已有cookie的直接方法。所以，需要使用相同的路徑、域和安全選項再次設置cookie，并將失效時間設置為過去的時間。
    unset: function (name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }
};

然后就可以像下面這樣使用上述方法

//設置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional JavaScript");

//讀取cookie的值
alert(CookieUtil.get("name")); //"Nicholas"
alert(CookieUtil.get("book")); //"professional JavaScript" 
            
//刪除cookie
CookieUtil.unset("name");
CookieUtil.unset("book");

4、子cookie
為了繞開瀏覽器的單域名下的cookie數限制，一些開發人員使用了一種稱為子cookie（subcookie）的概念。子cookie是存放在的那個cookie中的更小段的數據。也就是使用cookie值來存儲多個名稱值對兒。子cookie最常見的格式如下

name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5

子cookie一般也以查詢字符串否認格式進行格式化。然后這些值可以使用單個cookie進行存儲和訪問，而非對每個名稱-值對兒使用不同的cookie存儲。最后網站或者微博應用程序可以無需達到單域名cookie上限也可以存儲更加結構化的數據。

為了更好地操作子cookie，必須建立一系列新的方法。子cookie的解析序列和序列化會因子cookie的期望用途而略有不同并更加復雜些。

獲取子cookie的方法有兩個:get()和getAll()。其中get()獲取單個子cookie的值，getAll()獲取所有子cookie并將它們放入一個對象中返回，對象的屬性為子cookie的名稱，對應值為子cookie對應的值。get()方法接收兩個參數：cookie的名字和子cookie的名字。它其實就是調用getAll()獲取所有的子cookie，然后只返回所需的那一個（如果cookie不存在則返回null）。

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,
            cookieEnd,
            subCookies,
            i,
            parts,
            result = {};
            
        if (cookieStart > -1){
            cookieEnd = document.cookie.indexOf(";", cookieStart)
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);
            
            if (cookieValue.length > 0){
                subCookies = cookieValue.split("&");
                
                for (i=0, len=subCookies.length; i < len; i++){
                    parts = subCookies[i].split("=");
                    result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
                }
                return result;
            }  
        } 

        return null;
    }

要設置子cookie,也有兩種方法：set()和setAll().為了在同一個cookie中存儲多個子cookie，路徑、域和secure標志必須一致；針對整個cookie的失效日期則可以在任何一個多帶帶的子cookie寫入的時候同時設置。在這個set()方法中，第一步是獲取指定cookie名稱對應的所有子cookie。邏輯或操作符"||"用于當getAll()返回null時將subcookies設置為一個新對象。然后，在subcookies對象上設置好子cookie值并傳給setAll()。

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) + "=",
            subcookieParts = new Array(),
            subName;
        
        for (subName in subcookies){
            if (subName.length > 0 && subcookies.hasOwnProperty(subName)){
                subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));
            }
        }
        
        if (subcookieParts.length > 0){
            cookieText += subcookieParts.join("&");
                
            if (expires instanceof Date) {
                cookieText += "; expires=" + expires.toGMTString();
            }
        
            if (path) {
                cookieText += "; path=" + path;
            }
        
            if (domain) {
                cookieText += "; domain=" + domain;
            }
        
            if (secure) {
                cookieText += "; secure";
            }
        } else {
            cookieText += "; expires=" + (new Date(0)).toGMTString();
        }
    
        document.cookie = cookieText;        
    
    }

子cookie的最后一組方法是用于刪除子cookie的。普通cookie可以通過將失效時間設置為過去的時間的方法來刪除，但是子cookie不能這樣做。為了刪除一個子cookie，首先必須獲取包含在某個cookie中的所有子cookie，然后再將余下的子cookie的值保存為cookie的值。

 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);
    }

整個SubCookieUtil部分代碼如下：

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,
            cookieEnd,
            subCookies,
            i,
            parts,
            result = {};
            
        if (cookieStart > -1){
            cookieEnd = document.cookie.indexOf(";", cookieStart)
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);
            
            if (cookieValue.length > 0){
                subCookies = cookieValue.split("&");
                
                for (i=0, len=subCookies.length; i < len; i++){
                    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) + "=",
            subcookieParts = new Array(),
            subName;
        
        for (subName in subcookies){
            if (subName.length > 0 && subcookies.hasOwnProperty(subName)){
                subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));
            }
        }
        
        if (subcookieParts.length > 0){
            cookieText += subcookieParts.join("&");
                
            if (expires instanceof Date) {
                cookieText += "; expires=" + expires.toGMTString();
            }
        
            if (path) {
                cookieText += "; path=" + path;
            }
        
            if (domain) {
                cookieText += "; domain=" + domain;
            }
        
            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);
    }

};

可以像下面這樣使用上述方法：

 //取得全部子cookie
 var data = SubCookieUtil.getAll("data");
 alert(data.name);  //"Nicholas"
 alert(data.book);  //"Professional JavaScript"

 //逐個獲取子cookie
 alert(SubCookieUtil.get("data","name")); //"Nicholas"
 alert(SubCookieUtil.get("data","book")); //"Professional JavaScript"

  //設置兩個cookie
  SubCookieUtil.set("data", "name", "Nicholas");
  SubCookieUtil.set("data", "book", "Professional JavaScript");

  //設置全部子cookie和失效日期
  SubCookieUtil.setAll("data",{name:"Nicholas", book:"Professional JavaScript"},new Date("January 1, 2010"));
  //修改名字的值，并修改cookie的失效日期
  SubCookieUtil.set("data", "name", "Michael", new Date("February 1,2010"));

5、關于cookie的思考
還有一類cookie被稱為“HTTP專有cookie”。HTTP專有cookie可以從瀏覽器或者服務器設置，但是只能從服務器端讀取。由于所有的cookie都會由瀏覽器作為請求頭發送，所以在cookie中存儲大量信息會影響到特定域請求性能。cookie信息越大，完成對服務器請求的時間也就越長。盡管瀏覽器對cookie進行了大小限制，不過最好還是盡可能在cookie中少儲存信息，以避免影響性能。

cookie的性質和它的局限使得并不能作為存儲大量信息的理想手段。
一定不要在cookie中存儲重要和敏感的數據。

微軟通過一個自定義行為引入了持久化用戶數據的概念。要使用持久化用戶數據，首先必須如下所示，使用CSS在某個元素上指定userData行為：

一旦該元素使用了userDate行為，那么就可以（1）使用setAttribute()方法在上面保存數據了。為了將數據提交到瀏覽器緩存中，還必須（2）調用save()方法并告訴它要保存到的數據空間的名字。數據空間名字可以完全任意，僅用于區分不同數據集。（3）下一次頁面載入之后，可以使用load()方法指定同樣的數據空間名稱來獲取數據。

var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("name", "Nicholas");
dataStore.setAttribute("book","Professional JavaScript");
datastore.save("BookInfo");  //指定了數據空間的名稱為BookInfo
dataStore.load("BookInfo");
alert(dataStore.getAttribute("name")); //"Nicholas"
alert(dataStore.getAttribute("book")); //"Professional JavaScript"

對load()的調用獲取了BookInfo數據空間中的所有信息，并且使數據可以通過元素訪問；只有到載入確切完成之后數據方能使用。如果getAttribute()調用了不存在的名稱或者是尚未載入的名稱，則返回null。

通過removeAttribute()方法明確指定要刪除某元素數據，只要指定屬性名稱。刪除之后，必須像下面這樣再次調用save()來提交更改。

dataStore.removeAttribute("name");
dataStore.removeAttribute("book");
dataStore.save("BookInfo");

和cookie一樣，IE用戶數據并非安全的，所以不能存放敏感信息。