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

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

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

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

1.1.3 殘缺美

在使用離線存儲的時候，總有些感到不是很爽的地方，列出來吐吐槽。

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

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

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

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

圖2-7 如果您有100個不同的傳參

1.2 本地存儲

1.2.1 本地存儲的方法

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