摘要：在這種情況下，瀏覽器將繼續(xù)使用原應(yīng)用緩存。對(duì)象對(duì)象有一個(gè)屬性，屬性的值是常量，表示應(yīng)用緩存的狀態(tài)。兼容性與其他客戶端儲(chǔ)存方案相比，同樣也有限制，這些限制因?yàn)g覽器圍而異。對(duì)象主要用于僅針對(duì)會(huì)話的小段數(shù)據(jù)的存儲(chǔ)。

開(kāi)發(fā)離線Web應(yīng)用需要幾個(gè)步驟:

首先確保應(yīng)用知道設(shè)備是否能上網(wǎng)。

應(yīng)用必須能訪問(wèn)一定的資源(圖像,Javascript,CSS)，這樣才能正常工作。

HTML5新定義的屬性，這個(gè)屬性值為true表示設(shè)備能上網(wǎng)，值為false表示離線設(shè)備。這個(gè)屬性的關(guān)鍵是瀏覽器必須知道設(shè)備能否訪問(wèn)網(wǎng)絡(luò)，從而返回正確的值。

HTML5還定義了兩個(gè)事件:online和offline。

當(dāng)網(wǎng)絡(luò)從離線變?yōu)樵诰€或者從在線變?yōu)殡x線，分別觸發(fā)著兩個(gè)事件。

兼容性

HTML5的應(yīng)用緩存，或者簡(jiǎn)稱為appcache,是專(zhuān)門(mén)為開(kāi)發(fā)離線Web應(yīng)用而設(shè)計(jì)的。Appcache就是從瀏覽器緩存中分出來(lái)的一塊緩存區(qū)。

要想在這個(gè)緩存中保存數(shù)據(jù)，可以使用一個(gè)描述文件(manifest file),列出要下載和緩存的資源。即使用戶在離線狀態(tài)下按了刷新按鈕，您的應(yīng)用也會(huì)正常加載和運(yùn)行。

使用緩存接口可為您的應(yīng)用帶來(lái)以下三個(gè)優(yōu)勢(shì)：

離線瀏覽 - 用戶可在離線時(shí)瀏覽您的完整網(wǎng)站

速度 - 緩存資源為本地資源，因此加載速度較快。

服務(wù)器負(fù)載更少 - 瀏覽器只會(huì)從發(fā)生了更改的服務(wù)器下載資源。

清單文件必須以 text/cache-manifest MIME 類(lèi)型提供

清單文件格式

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached "master entries".
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

清單可包括以下三個(gè)不同部分：CACHE、NETWORK 和 FALLBACK。

CACHE： 這是條目的默認(rèn)部分。系統(tǒng)會(huì)在首次下載此標(biāo)頭下列出的文件（或緊跟在 CACHE MANIFEST 后的文件）后顯式緩存這些文件。

NETWORK：
此部分下列出的文件是需要連接到服務(wù)器的白名單資源。無(wú)論用戶是否處于離線狀態(tài)，對(duì)這些資源的所有請(qǐng)求都會(huì)繞過(guò)緩存。可使用通配符。

FALLBACK：
此部分是可選的，用于指定無(wú)法訪問(wèn)資源時(shí)的后備網(wǎng)頁(yè)。其中第一個(gè) URI 代表資源，第二個(gè)代表后備網(wǎng)頁(yè)。兩個(gè) URI 必須相關(guān)，并且必須與清單文件同源。可使用通配符。

NOTE這些部分可按任意順序排列，且每個(gè)部分均可在同一清單中重復(fù)出現(xiàn)。

引用清單文件

  ...

NOTE:

CACHE MANIFEST 字符串應(yīng)在第一行，且必不可少。

網(wǎng)站的緩存數(shù)據(jù)量不得超過(guò) 5 MB。

HTTP 緩存標(biāo)頭以及對(duì)通過(guò) SSL 提供的網(wǎng)頁(yè)設(shè)置的緩存限制將被替換為緩存清單(也就是加了密的網(wǎng)站Are https URLs encrypted)。因此，通過(guò) https 提供的網(wǎng)頁(yè)可實(shí)現(xiàn)離線運(yùn)行。

如果您要編寫(xiě)的是針對(duì) Chrome 網(wǎng)上應(yīng)用店的應(yīng)用，可使用 unlimitedStorage 取消該限制。
如果清單文件或其中指定的資源無(wú)法下載，就無(wú)法進(jìn)行整個(gè)緩存更新進(jìn)程。在這種情況下，瀏覽器將繼續(xù)使用原應(yīng)用緩存。

applicationCache對(duì)象有一個(gè)status屬性，屬性的值是常量，表示應(yīng)用緩存的狀態(tài)。

0:無(wú)緩存，即沒(méi)有與頁(yè)面相關(guān)的應(yīng)用緩存

1:閑置，即應(yīng)用緩存未得到更新

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

3:下載中，即應(yīng)用緩存正在下載描述文件中指定的資源

4:更新完成，即應(yīng)用緩存已經(jīng)更新了資源，而且所有資源都已下載完畢，可以通過(guò)swapCache()來(lái)使用了

5:廢棄，即應(yīng)用緩存的描述文件已經(jīng)不存在了，因此頁(yè)面無(wú)法再訪問(wèn)應(yīng)用緩存

checking:在瀏覽器為應(yīng)用緩存查找更新時(shí)觸發(fā)

error:在檢查更新或下載資源期間發(fā)生錯(cuò)誤時(shí)觸發(fā)

noupdate:在檢查描述文件無(wú)變化時(shí)粗放

downloading:在開(kāi)始下載應(yīng)用緩存時(shí)資源時(shí)觸發(fā)

progress:在文件下載應(yīng)用緩存資源時(shí)粗放

updateready:在頁(yè)面新的應(yīng)用緩存下載完畢，而且可以通過(guò)swapCache()時(shí)觸發(fā)。

兼容性

HTTP cookie，通常叫做cookie，最初是在客戶端用于存儲(chǔ)會(huì)話信息的。該標(biāo)準(zhǔn)要求服務(wù)器的任意HTTP請(qǐng)求發(fā)送Set-Cookie HTTP頭部作為響應(yīng)的一部分，其中包含會(huì)話信息。

// HTTP響應(yīng)
HTTP/1.1 200 OK
Content-type: text/html
Set-cookie: name=value
Other-header: other-header-value 

// HTTP請(qǐng)求
GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

第一段會(huì)話過(guò)程
服務(wù)器:設(shè)置name=value的cookie,并將其作為響應(yīng)頭部的一部分，發(fā)送給瀏覽器。
瀏覽器:儲(chǔ)存name=value的cookie并將其作為請(qǐng)求頭的一部分，發(fā)送給服務(wù)器。

NOTE:

會(huì)話過(guò)程的名稱和值都是經(jīng)過(guò)URL編碼的。

每個(gè)域的cookie總數(shù)是有限的，不同瀏覽器之間各有不同。當(dāng)超過(guò)單個(gè)域名限制之后還有再設(shè)置cookie，瀏覽器就會(huì)清除以前的cookie。

cookie在性質(zhì)上是綁定在特定域名下的。當(dāng)設(shè)定一個(gè)cookie后，再給創(chuàng)建它的域名發(fā)送請(qǐng)求時(shí)，都會(huì)包含這個(gè)cookie。

// HTTP響應(yīng)
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;path=/;secure
Other-header: other-header-value 

// HTTP請(qǐng)求
GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

名稱(name):一個(gè)唯一確定cookie的名稱，cookie的名稱必須是經(jīng)過(guò) URL編碼的。

值(value):儲(chǔ)存在cookie的字符串值，值必須被 URL編碼。

域:cookie對(duì)于那個(gè)域是有效的。所有向該域發(fā)送的請(qǐng)求中都會(huì)包含這個(gè)cookie信息。如果沒(méi)有明確設(shè)定，那么這個(gè)域會(huì)被認(rèn)作來(lái)自設(shè)置cookie的那個(gè)域。

路徑:對(duì)于指定域中的那個(gè)路徑，應(yīng)該向服務(wù)器發(fā)送cookie

失效時(shí)間:表示cookie應(yīng)該被刪除的那個(gè)時(shí)間戳

安全標(biāo)志:指定后，cookie只能在SSL的連接時(shí)，才能發(fā)送到服務(wù)器

第二段會(huì)話過(guò)程
服務(wù)器:設(shè)置name=value的cookie,同時(shí)告訴瀏覽器

它會(huì)在格林威治時(shí)間2007年1月22日7:20:24失效。

對(duì)于所有wrox.com的子域和域名下(由path參數(shù)指定的)都有效

同時(shí)通過(guò)SSL連接才能傳輸。
并將其作為響應(yīng)頭部的一部分，發(fā)送給瀏覽器。

瀏覽器:儲(chǔ)存name=value的cookie并將其作為請(qǐng)求頭的一部分，發(fā)送給服務(wù)器。

Note:后四個(gè)，域/路徑/失效時(shí)間/安全標(biāo)志都是 服務(wù)器給瀏覽器的指示。以指定何時(shí)該發(fā)送cookie。這些參數(shù)并不會(huì)作為發(fā)送到服務(wù)器的標(biāo)志，名值對(duì)才會(huì)被發(fā)送。只有cookie的名字和值是必須的。

讀

用來(lái)獲取屬性值時(shí)，document.cookie返回當(dāng)前頁(yè)面可用的(根據(jù)cookie的域，路徑，失效時(shí)間和安全設(shè)置)所有的cookie的字符串。

[]()

寫(xiě)

當(dāng)用來(lái)設(shè)置值得時(shí)候，document.cookie可以用來(lái)設(shè)置新的cookie字符串。這個(gè)cookie字符串會(huì)用來(lái)解釋并添加到現(xiàn)有的cookie中。設(shè)置的值并不會(huì)覆蓋cookie，除非設(shè)置的值已經(jīng)存在。

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.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;
    },

    unset: function ( name, path, domain, secure ) {

        this.set( name, "" , new Date(0), path, domain, secure)
    }
}

為了繞開(kāi) 瀏覽器 的單域名下的cookie數(shù)限制，一種開(kāi)發(fā)人員使用了一種稱為子cookie(subcookie)的概念。子cookie是存放在單個(gè)cookie中的更小段的數(shù)據(jù)。也就是使用cookie值來(lái)儲(chǔ)存多個(gè)名稱值對(duì)兒。

子cookie一般以查詢字符串的格式進(jìn)行格式化。然后這些值可以使用單個(gè)cookie進(jìn)行儲(chǔ)存和訪問(wèn)
name=name1=value1&name2=value2&name3=value3

上面展示了如何寫(xiě)入，讀取和刪除cookie，下面展示操作子cookie的方法。

var SubCookieUtil = {

    get: function ( name, subName ) {

        var cookieValue = this.getAll( name );

        if( subName ) {

            return result[subName];
        }
        else {

            return null;
        }
    },

    getAll: function ( name ) {

        var cookieName  = encodeURIComponent( name ) + "=",
            cookieStart = document.cookie.indexOf( cookieName ),
            cookieValue = null,
            cookieEnd,
            result      = {};

        if( cookieStart > -1 ) {

            cookieEnd = document.cookie.indexOf( ";", cookieStart );

            if( cookieEnd === -1 ) {

                cookieEnd = document.cookie.length;
            }
        }

        cookieValue = document.cookie.substring( cookieStart+cookieName.length, cookieEnd );

        decodeURIComponent( cookieValue );

        if( cookieValue.length > 0 ) {

            subCookies = cookieValue.split( "&" );

            for( var i = 0; i < subCookies.length; i++  ) {

                var parts = subCookies[i].split( "=" );

                result[parts[0]] = parts[1];

            }

            return result;
        }
        else {

            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 ) + "=",
            subCookiesParts = [],
            subName;

        for( subName in subCookies ) {

            if( subCookies.hasOwnProperty( subName ) ) {

                subCookiesParts.push( encodeURIComponent(subName) + "=" + encodeURIComponent(subCookies[subName]) );
            }
        }

        if( subCookiesParts.length > 0 ) {

            cookieText += subCookiesParts.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;

    },

    unsetAll: function ( name, subCookies, expires, path, domain, secure ) {

        this.set( name, null, new Date(0), path, domain, secure );
    },

    unset: function ( name, subName, expires, path, domain, secure ) {

        var subCookies = this.get( name );

        if( subCookies ) {

            delete subCookies[subName]
            this.setAll( name, subCookies, expires, path, domain, secure );
        }

    }
}

由于所有的cookie都會(huì)由瀏覽器作為請(qǐng)求頭發(fā)送，所以在cookie中存儲(chǔ)大量信息會(huì)影響到特定域的請(qǐng)求性能。cookie信息越大，完成對(duì)服務(wù)器請(qǐng)求的時(shí)間也就越長(zhǎng)。

cookie數(shù)據(jù)并非存儲(chǔ)在一個(gè)安全環(huán)境中，其中包含的任何數(shù)據(jù)都可被他人訪問(wèn)。所以一定不要在cookie中儲(chǔ)存重要和敏感的數(shù)據(jù)。

在IE5.0中，微軟通過(guò)一個(gè)自定義行為引入了持久化用戶數(shù)據(jù)的概念。用戶數(shù)據(jù)允許每個(gè)文檔最多128KB數(shù)據(jù)，每個(gè)域名最多1MB數(shù)據(jù)。要使用持久化用戶數(shù)據(jù)，首先，必須如下所示，使用CSS在某個(gè)元素上指定userData行為。

`
`

var dataStore = getElementById("dataStore");
// 寫(xiě)入數(shù)據(jù)
dataStore.setAttribute("name","Nicholas");
dataStore.setAttribute("book","Professional Javascript");
dataStore.save("BookInfo");

// 獲取數(shù)據(jù)
dataStore.load("BookInfo"); 
// 訪問(wèn)數(shù)據(jù)
console.log(dataStore.getAttribute("name"));
console.log(dataStor.getAttribute("book"));

// 刪除數(shù)據(jù)
dataStore.removeAttribute( "name" );
dataStore.removeAttribute( "book" );
dataStore.save("BookInfo");

Note:

和cookie一樣，IE用戶數(shù)據(jù)并非安全的，所有不能存放敏感信息。

用戶數(shù)據(jù)默認(rèn)是可以跨越會(huì)話持久存在的，同時(shí)也不會(huì)過(guò)期

要訪問(wèn)某個(gè)數(shù)據(jù)空間，腳本運(yùn)行的頁(yè)面必須來(lái)自于同一個(gè)域名，路徑并使用與進(jìn)行存儲(chǔ)的腳本同樣的協(xié)議。

Web Storage的兩個(gè)主要目標(biāo)是

提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的途徑

提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制。

兼容性

Note:與其他客戶端儲(chǔ)存方案相比，WebStorage同樣也有限制，這些限制因?yàn)g覽器圍而異。一般來(lái)說(shuō)，對(duì)存儲(chǔ)空間大小的限制都是以每個(gè)來(lái)源(協(xié)議，域名，端口號(hào))為單位的。換句話說(shuō)，每個(gè)來(lái)源都要固定大小的空間用于保存自己的數(shù)據(jù)。考慮到這個(gè)限制，就要注意分析和控制每個(gè)來(lái)源中有多少頁(yè)面需要保存數(shù)據(jù)。

webStorage限制測(cè)試

Storage提供最大的空間(因?yàn)g覽器而異)來(lái)儲(chǔ)存名值對(duì)。

sessionStorage instanceof Storage // true
localStorage instanceof Storage// true

localStorage.__proto__ === Storage.prototype // true
sessionStorage.__proto__ === Storage.prototype // true

由上可知，sessionStorage對(duì)象與localStorage對(duì)象都為Storge類(lèi)型的實(shí)例。因此它們都可以訪問(wèn)到Storage類(lèi)型的原型對(duì)象上的方法。有如下這些方法。

clear():刪除所有值;Firefox中沒(méi)有實(shí)現(xiàn)

getItem(name):根據(jù)指定的名字name獲取對(duì)應(yīng)的值

key(index):獲得index位置處的值得名字

removeItem(name):刪除由name指定的名值對(duì)

setItem(nname, value):為指定的name設(shè)置一個(gè)對(duì)應(yīng)的值

同時(shí)可以使用length屬性判斷Storage對(duì)象中有多少名值對(duì)。但無(wú)法判斷對(duì)象中所有數(shù)據(jù)的大小，不過(guò)IE8提供了一個(gè)remainingSpace屬性，用于獲取還可以使用的存儲(chǔ)空間的字節(jié)數(shù)。

Note:Storge類(lèi)型只能存儲(chǔ)字符串。非字符串的數(shù)據(jù)在存儲(chǔ)之前會(huì)被轉(zhuǎn)換為字符串。

為每一個(gè)給定的源（given origin）維持一個(gè)獨(dú)立的存儲(chǔ)區(qū)域，該存儲(chǔ)區(qū)域在頁(yè)面會(huì)話期間可用（即只要瀏覽器處于打開(kāi)狀態(tài)，包括頁(yè)面重新加載和恢復(fù)）。

sessionStorage對(duì)象主要用于僅針對(duì)會(huì)話的小段數(shù)據(jù)的存儲(chǔ)。它儲(chǔ)存特定于某個(gè)會(huì)話的數(shù)據(jù)，也就是該數(shù)據(jù)只保持到瀏覽器關(guān)閉。這個(gè)對(duì)象就像會(huì)話cookie，也會(huì)在瀏覽器關(guān)閉后消失。

存儲(chǔ)在sessionStorage中的數(shù)據(jù)可以跨越頁(yè)面而存在，同時(shí)如果瀏覽器支持，瀏覽器崩潰重啟后依然可用(Firefox和Webkit都支持，IE不行)。

sessionStorage對(duì)象綁定于某個(gè)服務(wù)器會(huì)話，所有當(dāng)文件在本地運(yùn)行的時(shí)候是不可用的。

存儲(chǔ)在sessionStorage的數(shù)據(jù)只能由最初給對(duì)象儲(chǔ)存數(shù)據(jù)的的頁(yè)面訪問(wèn)到，所以對(duì)多頁(yè)面應(yīng)用有限制。

// 寫(xiě)入數(shù)據(jù)
sessionStorage.setItem( "name", "Nicholas" );

// 訪問(wèn)數(shù)據(jù)
sessionStorage.getItem( "name" );

// 迭代數(shù)據(jù)
for( var i = 0,len = sessionStorage.length; i < len; i++ ) {
    
    var key = sessionStorge.key( i );
    var value = sessionStorage.getItem( key );
    console.log( key + "=" + value );
}
for(key in sessionStorage) {

    var value = sessionStorage.getItem( key );
    console.log( key + "=" + value );
}

// 刪除數(shù)據(jù)
sessionStorage.removeItem( "name" );

Note:不同瀏覽器寫(xiě)入數(shù)據(jù)的方法略有不同。Firefox和Webkit實(shí)現(xiàn)了同步寫(xiě)入，所有添加到儲(chǔ)存空間的數(shù)據(jù)是立刻被提交的。而IE的實(shí)現(xiàn)是異步寫(xiě)入數(shù)據(jù)，所以在設(shè)置數(shù)據(jù)和將數(shù)據(jù)寫(xiě)入磁盤(pán)之間可能有一些延遲。對(duì)于少量數(shù)據(jù)而言，這個(gè)差異是可以忽略的。對(duì)于大量數(shù)據(jù)，你會(huì)發(fā)現(xiàn)IE比其他瀏覽器更快的恢復(fù)執(zhí)行，因?yàn)樗鼤?huì)跳過(guò)實(shí)際的磁盤(pán)寫(xiě)入過(guò)程。
在IE8中可強(qiáng)制把數(shù)據(jù)寫(xiě)入磁盤(pán)，如下。

// 防止代碼執(zhí)行的時(shí)候，不會(huì)發(fā)生其他磁盤(pán)寫(xiě)入操作
sessionStorage.begin();

sessionStorage.name = "Nicholas";

// 確保name的值在調(diào)用commit()之后立刻寫(xiě)入磁盤(pán)
sessionStorage.commit();

localStorage 同樣的功能，但是在瀏覽器關(guān)閉，然后重新打開(kāi)后數(shù)據(jù)仍然存在。

localStorage實(shí)現(xiàn)跨越會(huì)話存儲(chǔ)數(shù)據(jù)，在HTML5規(guī)范中作為持久保存客戶端數(shù)據(jù)的方案取代了globalStorage。
規(guī)則:要訪問(wèn)同一個(gè)localStorage對(duì)象，頁(yè)面必須來(lái)自于同一個(gè)域名(子域名無(wú)效)，使用同一種協(xié)議，在同一個(gè)端口上。

因?yàn)閘ocalStorage是Storage的實(shí)例，所有可以像使用sessionStorage一樣來(lái)使用它。

對(duì)Storage對(duì)象進(jìn)行任何修改，都會(huì)在文檔上觸發(fā)storage事件。

storge事件對(duì)象

domain:發(fā)生變化的儲(chǔ)存空間的域名

key:設(shè)置或者刪除的鍵名

newVaule:如果是設(shè)置值，則為新值；如果是刪除鍵，則為null

oldValue:鍵被更改之前的值