本來這篇文章想叫《挺起你的HTML5》或者《讓HTML5飛》或者神馬其他的，但是為了更好的體現(xiàn)主題，我就用這個直白點的題目吧?
![[酷]](http://img.it610.com/image/product/2cb3e48162834eb4a08ea36c3810d48b.gif){kind=small}
~
隨 著各種智能手機(iPhone、Android)大行其道，App模式的應用開發(fā)變得熱火朝天，反觀Web領(lǐng)域則黯然失色。然而即將（或者說已 經(jīng)）到來的HTML5，又為Web注入了新鮮的雞血，讓我等Web碼農(nóng)再次激動不已——我們可以用HTML、CSS、JavaScript開發(fā)手機應用 了！可以實現(xiàn)絕大部分Native App的功能，跨平臺，自動更新，即需即取……親，只需要有瀏覽器喲！而且沒有惡心的IE6
![[喜歡]](http://img.it610.com/image/product/a035c828984840d08295804cd25c1dfe.gif){kind=small}
~
做任何一個應用都離不開兩種東西：文件和數(shù)據(jù)。下面我就以一個簡單的小應用來介紹一下如何開發(fā)一個Web應用，讓它能夠在Offline的情況下取得文件和數(shù)據(jù)。
?
Cache Manifest
首先，請自行實現(xiàn)一個包含圖片、JavaScript、CSS的普通HTML頁面。
顯而易見的，這個頁面所包含的文件有HTML、JavaScript、CSS、圖片。為了讓這個頁面能夠離線訪問，我們必須告訴瀏覽器，它要緩存那些文件，讓我們下次訪問的時候直接在本地取即可。
HTML5給我們提供了一種Cache Manifest的機制，讓我們實現(xiàn)這樣的功能。Cache?Manifest是通過一個 .manifest為后綴的文件來配置需要緩存的或者一定要保持聯(lián)網(wǎng)的文件，格式如下：
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
?
一種是在網(wǎng)站的.htaccess文件中加上：
AddType text/cache-manifest manifest
?
最后，最好重啟一下你的服務器~~~
使用了Cache?Manifest機制后，瀏覽器就不會自動更新你所緩存的內(nèi)容了，如果想更新客戶端緩存的內(nèi)容，修改.manifest文件的任意內(nèi)容即可。修改版本號是一種推薦的做法，即上面的“#VERSION 1.0”（這是一個注釋），甚至可以說是最佳實踐。
如果想了解更多，請看 這里 。
?
?
Local Storage
localStorage是Web Storage存儲規(guī)范中的一部分(雖然大家很喜歡把它歸到HTML5的東西里面去)，目前多數(shù)瀏覽器都已經(jīng)支持了（ie8+也支持喔~）。
這是一個易學易用的東西，用于保存key-value形式的鍵值對。說到鍵值對肯定很容易想到Cookie，不過Cookie在每次請求中都會被發(fā)送到服務器端，如果使用大數(shù)據(jù)集合的話會有性能問題，在傳輸中也會有安全問題。
下面就講講localStorage的使用吧。
?
首先，在召喚localstorage之前當然要檢測一下是否可用：
//檢測localStorage是否可用
//本段代碼來自<Dive Into HTML5>
function supports_html5_storage() {
try {
//不懂為啥要寫這么復雜
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
?
?
使用localstorage的方式很簡單, 直接像訪問對象一樣訪問它即可:
//設置數(shù)據(jù) setItem
localStorage.setItem("myKey", "myValue");
//獲取數(shù)據(jù) getItem
var data= localStorage.getItem("myKey");
//還能用數(shù)組這樣的格式來訪問
localStorage["myKey2"] = "myValue2";
var data2 = localStorage["myKey2"];
//移除指定數(shù)據(jù)
localStorage.removeItem("myKey2");
//清空數(shù)據(jù)
localStorage.clear();
?
?
操作結(jié)果可以在“開發(fā)人員工具”中看到
?
一些LocalStorage的注意事項：
- localStorage要通過域名訪問的方式才能起作用，直接打開本地文件是不行滴喲~
- 俺們保存的都是string，如果是int或者float的話，get回來之后記得轉(zhuǎn)換一下；
- 本地存儲數(shù)據(jù)在同樣域名下的網(wǎng)頁間是共享的，即便是在多個瀏覽器標簽頁中；
- 使用 http:// 連接的頁面是看不到使用 https:// 連接會話中的數(shù)據(jù)庫的。
?
有了Cache Manifest和LocalStorage這兩個利器，是不是覺得HTML5開發(fā)手機離線應用開始有這么點眉目了？
?
原文： http://rolfzhang.com/articles/522.html
?
更多文章、技術(shù)交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
