TGideas實(shí)例：加載，不只是少一點(diǎn)點(diǎn)(2)

5，我們使用HTML5新提供的online時(shí)間在頁(yè)面加載的時(shí)候判斷手機(jī)是否在線。監(jiān)聽(tīng)window的online和offline時(shí)間，可以判斷手機(jī)是不是已經(jīng)聯(lián)網(wǎng)。一旦檢測(cè)到手機(jī)聯(lián)網(wǎng)，我們就可以調(diào)用applicationCache對(duì)象的update方法，去檢測(cè)manifest文件是否有更新，如果有，下載新的版本。當(dāng)updateready時(shí)，使用swapCache方法刷新緩存。

當(dāng)然swapCache不能刷新頁(yè)面的內(nèi)容，只是把離線存儲(chǔ)的文件更新成我們下載的新內(nèi)容，我們還需要再使用JS替換頁(yè)面的內(nèi)容。

圖2-5 離線存儲(chǔ)進(jìn)階應(yīng)用

1.1.3 殘缺美

在使用離線存儲(chǔ)的時(shí)候，總有些感到不是很爽的地方，列出來(lái)吐吐槽。

首先是兩個(gè)更新的問(wèn)題。我們知道，修改manifest文件后，瀏覽器會(huì)重新下載文件，而且是全部重新下載。這其實(shí)很蛋疼，有時(shí)候我們只需要更新其中一個(gè)文件，有點(diǎn)兒殃及池魚(yú)的感覺(jué)。另外，在更新manifest文件后，我們需要刷新兩次頁(yè)面才能將最終的新內(nèi)容呈現(xiàn)在頁(yè)面上。

然后，如果我有很多文件要存儲(chǔ)，需要把文件一個(gè)一個(gè)列入cache段里，就算使用程序生成，出來(lái)的manifest文件也有一定的體積。對(duì)于一個(gè)需要緩存300個(gè)文件的頁(yè)面，使用相對(duì)路徑，生成的manifest文件也有4K。在碰上更新的話，下載量有點(diǎn)兒大。

圖2-6 APP有200多個(gè)小圖標(biāo)需要緩存

最后，對(duì)于同一個(gè)頁(yè)面的帶參URL路徑，離線存儲(chǔ)會(huì)當(dāng)成不同的新文件進(jìn)行緩存。如果您有100個(gè)不同的參數(shù)需要穿，而用戶竟然訪問(wèn)過(guò)這100個(gè)文件，那就……

圖2-7 如果您有100個(gè)不同的傳參

1.2 本地存儲(chǔ)

1.2.1 本地存儲(chǔ)的方法

userData是IE提供的一個(gè)本地存儲(chǔ)方法，他將需要存儲(chǔ)的內(nèi)容放置在本地的一個(gè)XML文件中，并在頁(yè)面的一個(gè)元素中設(shè)置一個(gè)調(diào)用的錨點(diǎn)。具體使用方法為：使用getElementById獲取頁(yè)面內(nèi)的一個(gè)元素，使用addBehavior(“#default#userData”)對(duì)其添加本地存儲(chǔ)的行為；使用setAttribute將需要存儲(chǔ)的內(nèi)容對(duì)其進(jìn)行賦值，并用save(“XXX”)方法將內(nèi)容存儲(chǔ)在名