項(xiàng)目中需要將在線的Web改造成支持離線版本的Web應(yīng)用，思考了四種方法：
1.Manifest文件
它的特點(diǎn)有以下三點(diǎn)：
1.1 Manifest文件有變化才有更新
1.2一次必須更新完Manifest中的所有文件
1.3更新完成后下次生效
操作方式如下：
1.在html的開始標(biāo)簽中，我們指定一個(gè).manifest文件
<html lang="en" man[ifest="/offline.manifest">
2.由于manifest文件的MIME類型為text/cache-manifest，因此需要在服務(wù)器端配置：
1.apache服務(wù)器需要在mime.types中加入以下配置：text/cache-manifestmaifest?；蛘呖梢栽?htacess中加入以下配置 AddType text/cache-manifest.maifest。
- <span style="font-size:14px;color:#666666;">CACHE MANIFEST
- #v1
-
- CACHE:
- basic_page_layout_ch4.html
- css/main.css
- img/atwiNavBg.png
-
-
- NETWORK:
- *
-
- FALLBACK:
- //offline.html</span>
屬性：
NETWORK：部分羅列了所有不需要被緩存的文件，你可以將看成一個(gè)”在線白名單“。此處羅羅列的文件在網(wǎng)絡(luò)暢通的情況下都會(huì)直接跳過(guò)緩存。如果你想網(wǎng)絡(luò)內(nèi)容在網(wǎng)絡(luò)暢通個(gè)的情況下及時(shí)更新，可以在此處使用* 。星號(hào)唄成為在線白名單通配符。
FALLBACK：部分使用/字符定義了一個(gè)URL模板，他的作用是訪問(wèn)每個(gè)頁(yè)面時(shí)都會(huì)問(wèn)”緩存中有這個(gè)頁(yè)面嗎？“如果有則顯示緩存頁(yè)面，如果沒(méi)有，則顯示指定的offline.html文件。
2.Local storage
local storage的特點(diǎn)是永久存儲(chǔ)，也就是持久化本地存儲(chǔ)的表現(xiàn)。
2.1.接口與事件
它采用鍵值對(duì)的數(shù)據(jù)存儲(chǔ)方式，完全以字符串的形式存儲(chǔ)。
localStorage.getItem(key)，用于獲取指定key本地存儲(chǔ)的值。
localStorage.setItem(key,value),該接口用于將value的值村吃到key字段中。
localStorage.removeItem(key),用于刪除指定key在本地存儲(chǔ)的值。
localStorage.length
localStorage.key(index)，用于返回指定的key。
localStorage.clear().用于清除所有的本地存儲(chǔ)
3.SessionStorage
該方法的接口和事件與localStorage是一樣的，不同的是它是會(huì)話級(jí)別的數(shù)據(jù)，當(dāng)關(guān)閉了頁(yè)面之后，這些數(shù)據(jù)就會(huì)被刪除。
4.Web SQL
該方法是web端的數(shù)據(jù)庫(kù)方法，用于存儲(chǔ)一些具有復(fù)雜數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)形式和以上幾種無(wú)法存儲(chǔ)的文件等。
考慮到數(shù)據(jù)類型的不同，主要采取以下方法進(jìn)行存儲(chǔ)：
主頁(yè)使用 第一種格式存儲(chǔ)。
CSS樣式、js動(dòng)作，樣本文件js，內(nèi)容js采用localstorage存儲(chǔ)。
復(fù)雜數(shù)據(jù)格式采取Web SQL存儲(chǔ)。
代碼如下：
- <script type="text/javascript">
- $(document).ready(function () {
- console.log('ready %o',new Date());
- var APP_START_FAILED = "I'm sorry, the app can't start right now.";
- function startWithResources(resources, storeResources) {
-
- // Try to execute the Javascript
- try {
- //eval(resources.js); v6
- insertScript(resources.js);
- setTimeout(function(){
- APP.applicationController.start(resources, storeResources);
- },500);
-
- // If the Javascript fails to launch, stop execution!
- } catch (e) {
- alert(APP_START_FAILED);
- console.log('%o',e);
- }
- }
- function startWithOnlineResources(resources) {
- startWithResources(resources, true);
- }
-
- function startWithOfflineResources() {
- var resources;
-
- // If we have resources saved from a previous visit, use them
- if (localStorage && localStorage.resources) {
- resources = JSON.parse(localStorage.resources);
- startWithResources(resources, false);
-
- // Otherwise, apologize and let the user know
- } else {
- alert(APP_START_FAILED);
- }
- }
-
- // If we know the device is offline, don't try to load new resources
- if (navigator && navigator.onLine === false) {
- startWithOfflineResources();
-
- // Otherwise, download resources, eval them, if successful push them into local storage.
- } else {
- $.ajax({
- url: 'api/resources/',
- success: startWithOnlineResources,
- error: startWithOfflineResources,
- dataType: 'json'
- });
- }
- function insertScript (script) {
- var node=document.createElement('script');
- node.innerHTML=script;
- document.head.appendChild(node);
- }
-
- });
- </script>
