【IT168 技術】HTML5近十年來發展得如火如荼，在HTML 5平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。HTML功能愈來愈豐富，支持圖片上傳拖拽、支持localstorage、支持web sql database、支持文件存儲api等等。它任重而道遠，致力於將Web帶入一個更爲成熟的應用平臺。在全部炫酷特性中，最讓我喜歡的是它具備離線緩存Web應用的功能。javascript
開發離線Web 應用程序：三大核心功能php
在開發支持離線的 Web 應用程序時，開發者一般須要使用如下三個方面的功能：css
1. 離線資源緩存：須要一種方式來指明應用程序離線工做時所需的資源文件。這樣，瀏覽器才能在在線狀態時，把這些文件緩存到本地。此後，當用戶離線訪問應用程序時，這些資源文件會自動加載，從而讓用戶正常使用。HTML5 中，經過 cache manifest 文件指明須要緩存的資源，並支持自動和手動兩種緩存更新方式。html
2. 在線狀態檢測：開發者須要知道瀏覽器是否在線，這樣纔可以針對在線或離線的狀態，作出對應的處理。在 HTML5 中，提供了兩種檢測當前網絡是否在線的方式。java
3. 本地數據存儲：離線時，須要可以把數據存儲到本地，以便在線時同步到服務器上。爲了知足不一樣的存儲需求，HTML5 提供了 DOM Storage 和 Web SQL Database 兩種存儲機制。前者提供了易用的 key/value 對存儲方式，然後者提供了基本的關係數據庫存儲功能。css3
HTML5推出的 「Web Storage」(Web 存儲)APIweb
爲了彌補cookie容量小存在的缺陷，WebStorage能夠解決輕量級的存儲。HTML5推出的 「Web Storage」(Web 存儲)API，它包括 localStorage 和 sessionStorage，能夠存儲簡單對象(如應用程序狀態)，使用本地和會話存儲可以很好地完成，可是對大量的結構化數據進行處理時，須要用到 HTML5 的「Web SQL Database」 API 接口。sql
在HTML5中網絡存儲按照生命週期分爲2種，一種是基於會話(session),這種存儲週期只是當前會話，當網頁[注1]被關被後，或者被轉到其餘網站後，存儲也就被銷燬;數據庫
- sessionStorage.varName = 「生成新變量」;
- sessionStorage.varName = 「變量操做」;
- delete sessionStorage.varName; //刪除變量
另一種是本地存儲，當網頁下次被打開的時候，你仍然能夠訪問上次打開該網頁時存儲的數據，好比本地存儲的網站用戶名就可使用這種方式。api
用法和基於會話的存儲同樣，只是前綴名改爲了localStorage
- localStorage.varName = 「生成新變量」;
- localStorage.varName = 「變量操做」;
- delete localStorage.varName; //刪除變量
Web Storage
// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
離線存儲HTML5 Web SQL Database
Web SQL Database 提供了基本的關係數據庫功能，支持頁面上的複雜的、交互式的數據存儲。它既能夠用來存儲用戶產生的數據，也能夠做爲從服務器獲取數據的本地高速緩存。例如能夠把電子郵件、日程等數據存儲到數據庫中。Web SQL Database 支持數據庫事務的概念，從而保證了即便多個瀏覽器窗口操做同一數據，也不會產生衝突。
它還引入了一套使用 SQL 來操縱客戶端數據庫(client-side database)的 API，這些 API 是異步的(asynchronous)。所使用的 SQL 語言爲 SQLite 3.6.19。其中 SQLite 是一款輕型的數據庫，佔用資源很是低，支持 Windows/Linux/Unix 等主流操做系統，同時可以跟不少程序語言相結合，如 C#，PHP，Java，JavaScript 等，比起 Mysql，PostgreSQL 這兩款開源的數據庫管理系統來講，它的處理速度更快。目前iOS和Android平臺支持運行Web SQL Database。
var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
Web Workers
main.js:
var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');
task.js:
self.onmessage = function(event) {
// Do some work.
self.postMessage("recv'd: " + event.data);
};
HTML5 IndexedDB:輕量級NoSQL數據庫
IndexedDB是HTML5-WebStorage的重要一環，是一種輕量級NoSQL數據庫。
w3c爲IndexedDB定義了不少接口，其中Database對象被定義爲IDBDataBase。
瀏覽器對象中，實現了IDBFactory的只有indexedDB這個實例。
五步建立HTML5離線Web應用
在HTML5提供的全部炫酷功能裏，建立離線緩存網頁是我最喜歡的一個特性，如下是五步快速建立HTML5離線Web應用的步驟
1. 第一步：建立一個有效的HTML5文檔，HTML5 doctype比xhtml更易於識記。
建立一個名爲index.html的文件，這裏學習如何使用CSS3來策劃網站佈局。
http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries
2. 新增.htaccess支持
咱們要建立的緩存頁面稱爲manifest文件，假設你所使用的服務器是Apache，咱們在建立文件以前，須要往.htaccess文件新增一個指令。
打開.htaccess文件，該文件部署在網站的根目錄下，新增如下代碼：
該指令能夠確保每個.manifest文件文本高速緩存。若是該文件不存在，整個緩存效果就沒法實現，頁面也不能實現離線緩存。
3. 建立.manifest文件
在咱們建立好了.manifest文件後，事情就變得有趣多了。建立好新文件，命名爲offline.manifest，嵌入如下代碼。
#This is a comment
CACHE
index.html
style.css
image.jpg
image-med.jpg
image-small.jpg
notre-dame.jpg
如今你擁有了一個完美的manifest列表。其實原理很簡單，在聲明CACHE後，你能夠列出本身想要離線緩存的文件。這個對於緩存一個簡單的網頁，已是綽綽有餘了，而HTML5的緩存有其它一些有趣的功能。
#This is a comment
CACHE
index.html
style.css
NETWORK:
search.php
login.php
FALLBACK:
/api offline.html
在這個示例中，manifest文件聲明瞭CACHE，用於緩存index.html和style.css。同時，咱們聲明瞭NETWORK，用於指定不被緩存的文件，好比登陸頁面。
最後聲明的是FALLBACK，這個聲明容許將用戶轉入一個指定的頁面，好比本例中若是不打算離線查看API資源的話，能夠轉向Off.html頁面。
4. 將manifest 文件連接到HTML文檔中。
在manifest文件和主要的html文檔準備好了之後，你惟一還須要作的事情是將manifest文件連接到html文檔中。
操做方法很簡單，只需在html元算中添加manifest 屬性，代碼以下：
5. 測試