HTML5離線應用與客戶端存儲_ZenDei技術網路在線

支持離線 Web 應用開發是 HTML5 的另一個重點。所謂離線 Web 應用，就是在設備不能上網的情況下仍然可以運行的應用。開發離線Web 應用需要幾個步驟。首先是確保應用知道設備是否能上網，以便下一步執行正確的操作。然後，應用還必須能訪問一定的資源（圖像、Javascript、CSS等），只有 ...

支持離線 Web 應用開發是 HTML5 的另一個重點。所謂離線 Web 應用，就是在設備不能上網的情況下仍然可以運行的應用。

開發離線Web 應用需要幾個步驟。首先是確保應用知道設備是否能上網，以便下一步執行正確的操作。然後，應用還必須能訪問一定的資源（圖像、Javascript、CSS等），只有這樣才能正常工作。最好，必須有一塊本地空間用戶保存數據，無論能否上網都不妨礙讀寫。

HTML5 及其相關的 API讓開發離線應用成為現實。

離線檢測

要知道設備是否線上還是離線，HTML5 定義了一個 navigator.onLine 屬性，這個屬性值為 true 表示設備能上網，值為 false 表示設備離線。

if (navigator.onLine) {
    // 正常工作
} else {
    // 執行離線狀態時的任務
}

由於 navigator.onLine 存在一定的相容性問題，因此除了 navigator.onLine 屬性之外，為了更好地確定網路是否可用，HTML5 還定義了兩個事件 online 和 offline。

當網路在離線和線上之間切換時在 window 對象上觸發這兩個事件：

window.addEventListener('online', function() {
    // 正常工作
});

window.addEventListener('offline', function() {
    // 執行離線狀態時的任務
});

在實際應用中，最好在頁面載入後，最好先通過 navigator.onLine 取得初始的狀態。然後通過上述兩個事件來確定網路連接狀態是否變化。當上述事件觸發時，navigator.onLine 屬性的值也會改變，不過必須要手工輪詢這個屬性才能檢測到網路狀態的變化。

應用緩存

HTML5 的應用緩存（application cache），或者簡稱為 appcache，是專門為開發離線 Web 應用而設計的。Appcache 就是從瀏覽器的緩存中分出來的一塊緩存區。要想在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。描述文件示例：

CACHE MANIFEST
# Comment

file.js
file.css

然後在 html 中引用：

<html manifest="./xxx.manifest">

xxx.manifest 文件的 MIME 類型必須是 text/cache-manifest。

該 API 的核心是 applicationCache 對象，這個對象有一個 status 屬性，屬性的值是常量，表示應用緩存的如下當前狀態：

0：無緩存，即沒有與頁面相關的應用緩存
1：閑置，即應用緩存未得到更新
2：檢查中，即正在下載描述文件並檢查更新
3：下載中，即應用緩存正在下載描述文件中指定的資源
4：更新完成，即應用緩存已經更新了資源，而且所有資源都已下載完畢，可以通過 swapCache() 來使用了
5：廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存

相關事件：

checking： 在瀏覽器為應用緩存查找更新時觸發
error： 在檢查更新或者下載資源期間發生錯誤時觸發
noupdate： 在檢查描述文件發現文件無變化時觸發
downloading： 在開始下載應用緩存資源時觸發
progress： 在文件下載應用緩存的過程中持續不斷地觸發
updateready： 在頁面新的應用緩存下載完畢且可以通過 swapCache() 使用時觸發
cached： 在應用緩存完整可用時觸發

一般來講，這些事件會隨著頁面載入按上述順序依次觸發。也可以通過調用 update() 方法手動觸發上述事件。

數據存儲

HTTP Cookie，通常直接叫做 cookie，是在客戶端用於存儲會話信息的。該標準要求伺服器對任意 HTTP 請求發送 Set-Cookie HTTP 頭信息作為響應的一部分，其中包含會話信息。伺服器響應頭示例：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

然後瀏覽器 Set-Cookie 的會話信息，之後為每個請求添加 Cookie HTTP 頭將信息發送回伺服器，如下所示：

GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

發送回伺服器的額外信息可以用於唯一驗證客戶來自於發送的哪個請求。

完整的 cookie 包括：

名稱： 一個唯一確定 cookie 的名稱。必須被 URL 編碼。
值：存儲在 cookie 中的字元串值。必須被 URL 編碼。
域： cookie 對於哪個域是有效的。
路徑： 對於指定域中的那個路徑，應該向伺服器發送 cookie。
失效時間： 表示 cookie 何時應該被刪除的時間戳。
安全標誌： 指定後，cookie 只有在使用 SSL 連接的時候才發送到伺服器。

Set-Cookie：name=value; domain=www.laixiangran.cn; path=/; expires=Mon, 29 Oct 2018 03:53:10 GMT; secure;

基本用法

在 JavaScript 中操作 cookie 有些複雜，這是因為 document.cookie 屬性在不同的使用方式中表現出不同的行為。

當用來獲取屬性值時，document.cookie 返回當前頁面可用的所有 cookie 字元串，一系列由分號隔開的鍵值對，如下所示：

document.cookie
// name1=value1;name2=value2;name3=value3;

當用來設置值時，document.cookie 屬性會設置一個新的 cookie 字元串添加到現有的 cookie 集合中，並不會像普通對象設置屬性一樣覆蓋原 cookie 的值，除非設置的 cookie 的名稱已經存在，如下所示：

// cookie 的名稱不存在
document.cookie = 'name4=value4'
// name1=value1;name2=value2;name3=value3;name4=value4;
// 而不是 name4=value4;

// cookie 的名稱存在
document.cookie = 'name3=value4'
// name1=value1;name2=value2;name3=value4;

從上面的代碼我們可以看出，我們要讀取或者修改或者刪除指定 cookie 的值都不是很直觀方便，因此我們可以封裝一些方法，方便我們對 cookie 的操作：

var CookieUtil = {

    get: function (name) {
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd;

        if (cookieStart > -1) {
            cookieEnd = document.cookie.indexOf(";", cookieStart);
            if (cookieEnd == -1) {
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }

        return cookieValue;
    },

    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }

        if (path) {
            cookieText += "; path=" + path;
        }

        if (domain) {
            cookieText += "; domain=" + domain;
        }

        if (secure) {
            cookieText += "; secure";
        }

        document.cookie = cookieText;
    },

    unset: function (name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }

};

使用方法：

// 設置 cookie
CookieUtil.set('name', 'lai');
CookieUtil.set('sex', 'man');

// 讀取 cookie
CookieUtil.get('name'); // 'lai'
CookieUtil.get('sex'); // 'man'

// 刪除 cookie
CookieUtil.unset('name');
CookieUtil.unset('sex');

// 設置 cookie，包括它的路徑、域、失效日期
CookieUtil.set('name', 'lai', '/', 'www.laixiangran.cn', new Date());

大小限制

每個域的 cookie 總數是有限，不同瀏覽器之間所有不同，IE6 以下是最多 20 個，IE7 以上最多 50 個，Firefox最多 50 個，Opera 最多 30 個，Safari 和 Chrome 不限制。
cookie 的尺寸也有限制，大多數瀏覽器有大約 4096B。

Web Storage

Web Storage 的目的是剋服由 cookie 帶來的一些限制，當數據需要被嚴格控制在客戶端上時，無須持續地將數據發回伺服器。Web Storage 的兩個主要目標是：

提供一種在 cookie 之外存儲會話數據的路徑。
提供一種存儲大量可以跨會話存在的數據的機制。

Web Storage 主要定義了兩種對象：sessionStorage 和 localStorage，是 Storage 對象的實例，這兩個對象區別如下：

sessionStorage： 存儲特定於某個會話的數據，也就是該數據只保持到瀏覽器關閉。存儲數據大小大多數限制在 2.5M，少數瀏覽器限制在 5M 或者不限制。
localStorage： 數據保存到通過 JavaScript 刪除或者是用戶清除瀏覽器緩存。存儲數據大小大多數限制在 5M，少數瀏覽器限制在 2.5M 或者不限制。

Storage 類型有如下方法：

clear()： 刪除所有值。
getItem(name)： 根據指定的名字 name 獲取對應的值。
key(index)： 獲取 index 位置處的值的名字。
removeItem(name)： 刪除由 name 指定的鍵值對。
setItem(name, value)： 為指定的 name 設置一個對應的值，值為字元串。

對 sessionStorage 和 localStorage 進行操作都會觸發 storage 事件，該事件對象有以下屬性：

domain： 發生變化的存儲空間的功能變數名稱。
key： 設置或者刪除的鍵名。
newValue： 如果是設置值，則是新值；如果是刪除鍵，則是null。
oldValue： 鍵被更改之前的值。

IndexedDB

Indexed Database API，簡稱為 IndexedDB，是在瀏覽器中保存結構化數據的一種資料庫。其思想是創建一套 API，方便保存和讀取 JavaScript 對象，同時還支持查詢和搜索。

IndexedDB 設計的操作完全是非同步進行的。因此，大多數操作會以請求方式進行。

基本用法

var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB, // 獲取 indexedDB
    request,
    store,
    database,
    users = [
        {
            username: "007",
            firstName: "James",
            lastName: "Bond",
            password: "foo"
        },
        {
            username: "ace",
            firstName: "John",
            lastName: "Smith",
            password: "bar"
        }
    ];

// 打開資料庫
request = indexedDB.open("example");

// 註冊 onerror 及 onsuccess 事件
request.onerror = function (event) {
    alert("Something bad happened while trying to open: " + event.target.errorCode);
};
request.onsuccess = function (event) {
    database = event.target.result;
    
    // 操作資料庫
    initializeDatabase();
};

function initializeDatabase() {
    if (database.version != "1.0") {
    
        // 設置資料庫版本號
        request = database.setVersion("1.0");
        request.onerror = function (event) {
            alert("Something bad happened while trying to set version: " + event.target.errorCode);
        };
        request.onsuccess = function (event) {
        
            // 使用 users 創建對象存儲空間
            store = database.createObjectStore("users", {keyPath: "username"});
            var i = 0,
                len = users.length;

            while (i < len) {
            
                // 插入新值
                store.add(users[i++]);
            }

            alert("Database initialized for first time. Database name: " + database.name + ", Version: " + database.version);
        };
    } else {
        alert("Database already initialized. Database name: " + database.name + ", Version: " + database.version);
        
        // transaction() 創建事務，objectStore() 將存儲空間傳入事務
        request = database.transaction("users").objectStore("users").get("007");
        request.onsuccess = function (event) {
            alert(event.target.result.firstName);
        };
    }
}

限制

和 Web Storage類似，只能由同源（相同協議、功能變數名稱和埠）頁面操作，因此不能跨域共用信息。
Firefox 大小上限為 50M，移動端的 Firefox 大小上限為 5M，不允許本地文件訪問。
Chrome 大小上限為 5M，允許本地文件訪問。