HTML5離線應(yīng)用與客戶端存儲的實現(xiàn)方式

這篇文章將為大家詳細(xì)講解有關(guān)HTML5離線應(yīng)用與客戶端存儲的實現(xiàn)方式，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)索縣免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

支持離線 Web 應(yīng)用開發(fā)是 HTML5 的另一個重點。所謂離線 Web 應(yīng)用，就是在設(shè)備不能上網(wǎng)的情況下仍然可以運行的應(yīng)用。

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

HTML5 及其相關(guān)的 API讓開發(fā)離線應(yīng)用成為現(xiàn)實。

離線檢測

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

if (navigator.onLine) {
    // 正常工作
} else {
    // 執(zhí)行離線狀態(tài)時的任務(wù)
}

由于 navigator.onLine 存在一定的兼容性問題，因此除了 navigator.onLine 屬性之外，為了更好地確定網(wǎng)絡(luò)是否可用，HTML5 還定義了兩個事件 online 和 offline。

當(dāng)網(wǎng)絡(luò)在離線和在線之間切換時在 window 對象上觸發(fā)這兩個事件：

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

window.addEventListener('offline', function() {
    // 執(zhí)行離線狀態(tài)時的任務(wù)
});

在實際應(yīng)用中，最好在頁面加載后，最好先通過 navigator.onLine 取得初始的狀態(tài)。然后通過上述兩個事件來確定網(wǎng)絡(luò)連接狀態(tài)是否變化。當(dāng)上述事件觸發(fā)時，navigator.onLine 屬性的值也會改變，不過必須要手工輪詢這個屬性才能檢測到網(wǎng)絡(luò)狀態(tài)的變化。

應(yīng)用緩存

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

CACHE MANIFEST
# Comment

file.js
file.css

然后在 html 中引用：

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

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

該 API 的核心是 applicationCache 對象，這個對象有一個 status 屬性，屬性的值是常量，表示應(yīng)用緩存的如下當(dāng)前狀態(tài)：

  • 0： 無緩存，即沒有與頁面相關(guān)的應(yīng)用緩存

  • 1： 閑置，即應(yīng)用緩存未得到更新

  • 2： 檢查中，即正在下載描述文件并檢查更新

  • 3： 下載中，即應(yīng)用緩存正在下載描述文件中指定的資源

  • 4： 更新完成，即應(yīng)用緩存已經(jīng)更新了資源，而且所有資源都已下載完畢，可以通過 swapCache() 來使用了

  • 5： 廢棄，即應(yīng)用緩存的描述文件已經(jīng)不存在了，因此頁面無法再訪問應(yīng)用緩存

相關(guān)事件：

  • checking： 在瀏覽器為應(yīng)用緩存查找更新時觸發(fā)

  • error： 在檢查更新或者下載資源期間發(fā)生錯誤時觸發(fā)

  • noupdate： 在檢查描述文件發(fā)現(xiàn)文件無變化時觸發(fā)

  • downloading： 在開始下載應(yīng)用緩存資源時觸發(fā)

  • progress： 在文件下載應(yīng)用緩存的過程中持續(xù)不斷地觸發(fā)

  • updateready： 在頁面新的應(yīng)用緩存下載完畢且可以通過 swapCache() 使用時觸發(fā)

  • cached： 在應(yīng)用緩存完整可用時觸發(fā)

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

數(shù)據(jù)存儲

Cookie

HTTP Cookie，通常直接叫做 cookie，是在客戶端用于存儲會話信息的。該標(biāo)準(zhǔn)要求服務(wù)器對任意 HTTP 請求發(fā)送 Set-Cookie HTTP 頭信息作為響應(yīng)的一部分，其中包含會話信息。服務(wù)器響應(yīng)頭示例：

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

然后瀏覽器 Set-Cookie 的會話信息，之后為每個請求添加 Cookie HTTP 頭將信息發(fā)送回服務(wù)器，如下所示：

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

發(fā)送回服務(wù)器的額外信息可以用于唯一驗證客戶來自于發(fā)送的哪個請求。

完整的 cookie 包括：

  1. 名稱： 一個唯一確定 cookie 的名稱。必須被 URL 編碼。

  2. 值： 存儲在 cookie 中的字符串值。必須被 URL 編碼。

  3. 域： cookie 對于哪個域是有效的。

  4. 路徑： 對于指定域中的那個路徑，應(yīng)該向服務(wù)器發(fā)送 cookie。

  5. 失效時間： 表示 cookie 何時應(yīng)該被刪除的時間戳。

  6. 安全標(biāo)志： 指定后，cookie 只有在使用 SSL 連接的時候才發(fā)送到服務(wù)器。

復(fù)制代碼

代碼如下:

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

基本用法

在 JavaScript 中操作 cookie 有些復(fù)雜，這是因為 document.cookie 屬性在不同的使用方式中表現(xiàn)出不同的行為。

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

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

當(dāng)用來設(shè)置值時，document.cookie 屬性會設(shè)置一個新的 cookie 字符串添加到現(xiàn)有的 cookie 集合中，并不會像普通對象設(shè)置屬性一樣覆蓋原 cookie 的值，除非設(shè)置的 cookie 的名稱已經(jīng)存在，如下所示：

// 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);
    }
};

使用方法：

// 設(shè)置 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');

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

大小限制

  • 每個域的 cookie 總數(shù)是有限，不同瀏覽器之間所有不同，IE6 以下是最多 20 個，IE7 以上最多 50 個，F(xiàn)irefox最多 50 個，Opera 最多 30 個，Safari 和 Chrome 不限制。

  • cookie 的尺寸也有限制，大多數(shù)瀏覽器有大約 4096B。

Web Storage

  • Web Storage 的目的是克服由 cookie 帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時，無須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。Web Storage 的兩個主要目標(biāo)是：

  • 提供一種在 cookie 之外存儲會話數(shù)據(jù)的路徑。

  • 提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機(jī)制。

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

  • sessionStorage： 存儲特定于某個會話的數(shù)據(jù)，也就是該數(shù)據(jù)只保持到瀏覽器關(guān)閉。存儲數(shù)據(jù)大小大多數(shù)限制在 2.5M，少數(shù)瀏覽器限制在 5M 或者不限制。

  • localStorage： 數(shù)據(jù)保存到通過 JavaScript 刪除或者是用戶清除瀏覽器緩存。存儲數(shù)據(jù)大小大多數(shù)限制在 5M，少數(shù)瀏覽器限制在 2.5M 或者不限制。

Storage 類型有如下方法：

  • clear()： 刪除所有值。

  • getItem(name)： 根據(jù)指定的名字 name 獲取對應(yīng)的值。

  • key(index)： 獲取 index 位置處的值的名字。

  • removeItem(name)： 刪除由 name 指定的鍵值對。

  • setItem(name, value)： 為指定的 name 設(shè)置一個對應(yīng)的值，值為字符串。

對 sessionStorage 和 localStorage 進(jìn)行操作都會觸發(fā) storage 事件，該事件對象有以下屬性：

  • domain： 發(fā)生變化的存儲空間的域名。

  • key： 設(shè)置或者刪除的鍵名。

  • newValue： 如果是設(shè)置值，則是新值；如果是刪除鍵，則是null。

  • oldValue： 鍵被更改之前的值。

IndexedDB

Indexed Database API，簡稱為 IndexedDB，是在瀏覽器中保存結(jié)構(gòu)化數(shù)據(jù)的一種數(shù)據(jù)庫。其思想是創(chuàng)建一套 API，方便保存和讀取 JavaScript 對象，同時還支持查詢和搜索。

IndexedDB 設(shè)計的操作完全是異步進(jìn)行的。因此，大多數(shù)操作會以請求方式進(jìn)行。

基本用法

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"
        }
    ];

// 打開數(shù)據(jù)庫
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;
    
    // 操作數(shù)據(jù)庫
    initializeDatabase();
};

function initializeDatabase() {
    if (database.version != "1.0") {
    
        // 設(shè)置數(shù)據(jù)庫版本號
        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 創(chuàng)建對象存儲空間
            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() 創(chuàng)建事務(wù)，objectStore() 將存儲空間傳入事務(wù)
        request = database.transaction("users").objectStore("users").get("007");
        request.onsuccess = function (event) {
            alert(event.target.result.firstName);
        };
    }
}

限制

  • 和 Web Storage類似，只能由同源（相同協(xié)議、域名和端口）頁面操作，因此不能跨域共享信息。

  • Firefox 大小上限為 50M，移動端的 Firefox 大小上限為 5M，不允許本地文件訪問。

  • Chrome 大小上限為 5M，允許本地文件訪問。

關(guān)于HTML5離線應(yīng)用與客戶端存儲的實現(xiàn)方式就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享標(biāo)題：HTML5離線應(yīng)用與客戶端存儲的實現(xiàn)方式
網(wǎng)頁鏈接：http://muchs.cn/article0/jpipio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、響應(yīng)式網(wǎng)站、云服務(wù)器、企業(yè)建站、網(wǎng)站改版、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)