HTML5離線應用與客戶端儲存

laixiangran發表於2018-05-01
HTML客戶端

支援離線 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，允許本地檔案訪問。

相關文章