歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Html5學(xué)習(xí)之離線應(yīng)用與客戶端存儲詳解

發(fā)布時間：2018-05-06 21:06  回復(fù):0  查看:2725   最后回復(fù)：2018-05-06 21:06  

支持離線web應(yīng)用開發(fā)是html5的一個重點之一，在設(shè)備不能上網(wǎng)的情況下仍可以運行相關(guān)應(yīng)用，本文和大家分享的就是html5離線應(yīng)用與客戶端存儲相關(guān)內(nèi)容，一起來看看吧，希望對大家學(xué)習(xí)html5有所幫助。

　　開發(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.jsfile.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 OKContent-type: text/htmlSet-Cookie: name=valueOther-header: other-header-value

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

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

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

　　完整的 cookie 包括：

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

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

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

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

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

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

　　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è)置 cookieCookieUtil.set('name', 'lai');CookieUtil.set('sex', 'man');

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

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

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

　　大小限制

　　· 每個域的 cookie 總數(shù)是有限，不同瀏覽器之間所有不同，IE6 以下是最多 20 個，IE7 以上最多 50 個，Firefox最多 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ù)的機制。

　　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 進行操作都會觸發(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è)計的操作完全是異步進行的。因此，大多數(shù)操作會以請求方式進行。

　　基本用法

　　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，允許本地文件訪問。

 

 

來源：網(wǎng)絡(luò)


您還未登錄，請先登錄

熱門帖子

最新帖子

?