本來這篇文章想叫《挺起你的HTML5》或者《讓HTML5飛》或者神馬其他的，但是為了更好的體現主題，我就用這個直白點的題目吧? ~

隨著各種智能手機(iPhone、Android)大行其道，App模式的應用開發變得熱火朝天，反觀Web領域則黯然失色。然而即將（或者說已經）到來的HTML5，又為Web注入了新鮮的雞血，讓我等Web碼農再次激動不已——我們可以用HTML、CSS、JavaScript開發手機應用了！可以實現絕大部分Native App的功能，跨平臺，自動更新，即需即取……親，只需要有瀏覽器喲！而且沒有惡心的IE6 ~

做任何一個應用都離不開兩種東西：文件和數據。下面我就以一個簡單的小應用來介紹一下如何開發一個Web應用，讓它能夠在Offline的情況下取得文件和數據。

Cache Manifest

首先，請自行實現一個包含圖片、JavaScript、CSS的普通HTML頁面。

顯而易見的，這個頁面所包含的文件有HTML、JavaScript、CSS、圖片。為了讓這個頁面能夠離線訪問，我們必須告訴瀏覽器，它要緩存那些文件，讓我們下次訪問的時候直接在本地取即可。

HTML5給我們提供了一種Cache Manifest的機制，讓我們實現這樣的功能。Cache?Manifest是通過一個 .manifest為后綴的文件來配置需要緩存的或者一定要保持聯網的文件，格式如下：

      CACHE MANIFEST
# VERSION 1.0
 
# 直接緩存的文件
CACHE:
index.html
img.jpg
script.js
stylesheet.css
 
# 需要在時間在線的文件
NETWORK:
/wp-admin/
 
# 替代方案
FALLBACK:
/ajax/ ajax.html

同時，我們要給頁面的html標簽添加一個manifest屬性：

      <html manifest="到Manifest文件的路徑.manifest">

還有一點要注意的，就是Manifest文件的MIME類型必須正確，對于Apache有兩種設置方法（IIS沒研究過），一種是在Apache的配置文件mime.types中加上：

      text/cache-manifest manifest

一種是在網站的.htaccess文件中加上：

      AddType text/cache-manifest manifest

最后，最好重啟一下你的服務器~~~

使用了Cache?Manifest機制后，瀏覽器就不會自動更新你所緩存的內容了，如果想更新客戶端緩存的內容，修改.manifest文件的任意內容即可。修改版本號是一種推薦的做法，即上面的“#VERSION 1.0”（這是一個注釋），甚至可以說是最佳實踐。

如果想了解更多，請看這里。

?

Local Storage

localStorage是Web Storage存儲規范中的一部分(雖然大家很喜歡把它歸到HTML5的東西里面去)，目前多數瀏覽器都已經支持了（ie8+也支持喔~）。

這是一個易學易用的東西，用于保存key-value形式的鍵值對。說到鍵值對肯定很容易想到Cookie，不過Cookie在每次請求中都會被發送到服務器端，如果使用大數據集合的話會有性能問題，在傳輸中也會有安全問題。

下面就講講localStorage的使用吧。

首先，在召喚localstorage之前當然要檢測一下是否可用：

      //檢測localStorage是否可用
//本段代碼來自<Dive Into HTML5>
function supports_html5_storage() {
  try {
    //不懂為啥要寫這么復雜
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

使用localstorage的方式很簡單, 直接像訪問對象一樣訪問它即可:

      //設置數據 setItem
localStorage.setItem("myKey", "myValue");
 
//獲取數據 getItem
var data= localStorage.getItem("myKey");
 
//還能用數組這樣的格式來訪問
localStorage["myKey2"] = "myValue2";
 
var data2 = localStorage["myKey2"];
 
//移除指定數據
localStorage.removeItem("myKey2");
 
//清空數據
localStorage.clear();

操作結果可以在“開發人員工具”中看到

一些LocalStorage的注意事項：

localStorage要通過域名訪問的方式才能起作用，直接打開本地文件是不行滴喲~
俺們保存的都是string，如果是int或者float的話，get回來之后記得轉換一下；
本地存儲數據在同樣域名下的網頁間是共享的，即便是在多個瀏覽器標簽頁中；
使用 http:// 連接的頁面是看不到使用 https:// 連接會話中的數據庫的。

有了Cache Manifest和LocalStorage這兩個利器，是不是覺得HTML5開發手機離線應用開始有這么點眉目了？

原文： http://rolfzhang.com/articles/522.html

justcode.ikeepstudying.com

使用HTML5開發手機離線應用

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義