支持離線 Web 應(yīng)用開(kāi)發(fā)是 HTML5 的另一個(gè)重點(diǎn)。所謂離線 Web 應(yīng)用，就是在設(shè)備不能上網(wǎng)的情況下仍然可以運(yùn)行的應(yīng)用。
開(kāi)發(fā)離線Web 應(yīng)用需要幾個(gè)步驟。首先是確保應(yīng)用知道設(shè)備是否能上網(wǎng)，以便下一步執(zhí)行正確的操作。然后，應(yīng)用還必須能訪問(wèn)一定的資源（圖像、Javascript、CSS等），只有這樣才能正常工作。最好，必須有一塊本地空間用戶保存數(shù)據(jù)，無(wú)論能否上網(wǎng)都不妨礙讀寫。
HTML5 及其相關(guān)的 API讓開(kāi)發(fā)離線應(yīng)用成為現(xiàn)實(shí)。
離線檢測(cè)
要知道設(shè)備是否在線還是離線，HTML5 定義了一個(gè) navigator.onLine 屬性，這個(gè)屬性值為 true 表示設(shè)備能上網(wǎng)，值為 false 表示設(shè)備離線。
if (navigator.onLine) {
// 正常工作
} else {
// 執(zhí)行離線狀態(tài)時(shí)的任務(wù)
}
由于 navigator.onLine 存在一定的兼容性問(wèn)題，因此除了 navigator.onLine 屬性之外，為了更好地確定網(wǎng)絡(luò)是否可用，HTML5 還定義了兩個(gè)事件 online 和 offline。
當(dāng)網(wǎng)絡(luò)在離線和在線之間切換時(shí)在 window 對(duì)象上觸發(fā)這兩個(gè)事件：
window.addEventListener('online', function() {
// 正常工作
});
window.addEventListener('offline', function() {
// 執(zhí)行離線狀態(tài)時(shí)的任務(wù)
});
在實(shí)際應(yīng)用中，最好在頁(yè)面加載后，最好先通過(guò) navigator.onLine 取得初始的狀態(tài)。然后通過(guò)上述兩個(gè)事件來(lái)確定網(wǎng)絡(luò)連接狀態(tài)是否變化。當(dāng)上述事件觸發(fā)時(shí)，navigator.onLine 屬性的值也會(huì)改變，不過(guò)必須要手工輪詢這個(gè)屬性才能檢測(cè)到網(wǎng)絡(luò)狀態(tài)的變化。
應(yīng)用緩存
HTML5 的應(yīng)用緩存（application cache），或者簡(jiǎn)稱為 appcache，是專門為開(kāi)發(fā)離線 Web 應(yīng)用而設(shè)計(jì)的。Appcache 就是從瀏覽器的緩存中分出來(lái)的一塊緩存區(qū)。要想在這個(gè)緩存中保存數(shù)據(jù)，可以使用一個(gè)描述文件（manifest file），列出要下載和緩存的資源。描述文件示例：
CACHE MANIFEST
# Comment
file.js
file.css
然后在 html 中引用：
<html manifest="./xxx.manifest">
xxx.manifest 文件的 MIME 類型必須是 text/cache-manifest。
該 API 的核心是 applicationCache 對(duì)象，這個(gè)對(duì)象有一個(gè) status 屬性，屬性的值是常量，表示應(yīng)用緩存的如下當(dāng)前狀態(tài)：
- 0： 無(wú)緩存，即沒(méi)有與頁(yè)面相關(guān)的應(yīng)用緩存
- 1： 閑置，即應(yīng)用緩存未得到更新
- 2： 檢查中，即正在下載描述文件并檢查更新
- 3： 下載中，即應(yīng)用緩存正在下載描述文件中指定的資源
- 4： 更新完成，即應(yīng)用緩存已經(jīng)更新了資源，而且所有資源都已下載完畢，可以通過(guò) swapCache() 來(lái)使用了
- 5： 廢棄，即應(yīng)用緩存的描述文件已經(jīng)不存在了，因此頁(yè)面無(wú)法再訪問(wèn)應(yīng)用緩存
相關(guān)事件：
- checking： 在瀏覽器為應(yīng)用緩存查找更新時(shí)觸發(fā)
- error： 在檢查更新或者下載資源期間發(fā)生錯(cuò)誤時(shí)觸發(fā)
- noupdate： 在檢查描述文件發(fā)現(xiàn)文件無(wú)變化時(shí)觸發(fā)
- downloading： 在開(kāi)始下載應(yīng)用緩存資源時(shí)觸發(fā)
- progress： 在文件下載應(yīng)用緩存的過(guò)程中持續(xù)不斷地觸發(fā)
- updateready： 在頁(yè)面新的應(yīng)用緩存下載完畢且可以通過(guò) swapCache() 使用時(shí)觸發(fā)
- cached： 在應(yīng)用緩存完整可用時(shí)觸發(fā)
一般來(lái)講，這些事件會(huì)隨著頁(yè)面加載按上述順序依次觸發(fā)。也可以通過(guò)調(diào)用 update() 方法手動(dòng)觸發(fā)上述事件。
數(shù)據(jù)存儲(chǔ)
Cookie
HTTP Cookie，通常直接叫做 cookie，是在客戶端用于存儲(chǔ)會(huì)話信息的。該標(biāo)準(zhǔn)要求服務(wù)器對(duì)任意 HTTP 請(qǐng)求發(fā)送 Set-Cookie HTTP 頭信息作為響應(yīng)的一部分，其中包含會(huì)話信息。服務(wù)器響應(yīng)頭示例：
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value
然后瀏覽器 Set-Cookie 的會(huì)話信息，之后為每個(gè)請(qǐng)求添加 Cookie HTTP 頭將信息發(fā)送回服務(wù)器，如下所示：
GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value
發(fā)送回服務(wù)器的額外信息可以用于唯一驗(yàn)證客戶來(lái)自于發(fā)送的哪個(gè)請(qǐng)求。
完整的 cookie 包括：
- 名稱： 一個(gè)唯一確定 cookie 的名稱。必須被 URL 編碼。
- 值： 存儲(chǔ)在 cookie 中的字符串值。必須被 URL 編碼。
- 域： cookie 對(duì)于哪個(gè)域是有效的。
- 路徑： 對(duì)于指定域中的那個(gè)路徑，應(yīng)該向服務(wù)器發(fā)送 cookie。
- 失效時(shí)間： 表示 cookie 何時(shí)應(yīng)該被刪除的時(shí)間戳。
- 安全標(biāo)志： 指定后，cookie 只有在使用 SSL 連接的時(shí)候才發(fā)送到服務(wù)器。
Set-Cookie：name=value; domain=www.laixiangran.cn; path=/; expires=Mon, 29 Oct 2018 03:53:10 GMT; secure;
基本用法
在 JavaScript 中操作 cookie 有些復(fù)雜，這是因?yàn)?document.cookie 屬性在不同的使用方式中表現(xiàn)出不同的行為。
當(dāng)用來(lái)獲取屬性值時(shí)，document.cookie 返回當(dāng)前頁(yè)面可用的所有 cookie 字符串，一系列由分號(hào)隔開(kāi)的鍵值對(duì)，如下所示：
document.cookie
// name1=value1;name2=value2;name3=value3;
當(dāng)用來(lái)設(shè)置值時(shí)，document.cookie 屬性會(huì)設(shè)置一個(gè)新的 cookie 字符串添加到現(xiàn)有的 cookie 集合中，并不會(huì)像普通對(duì)象設(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 的值都不是很直觀方便，因此我們可以封裝一些方法，方便我們對(duì) 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());
大小限制
- 每個(gè)域的 cookie 總數(shù)是有限，不同瀏覽器之間所有不同，IE6 以下是最多 20 個(gè)，IE7 以上最多 50 個(gè)，F(xiàn)irefox最多 50 個(gè)，Opera 最多 30 個(gè)，Safari 和 Chrome 不限制。
- cookie 的尺寸也有限制，大多數(shù)瀏覽器有大約 4096B。
Web Storage
- Web Storage 的目的是克服由 cookie 帶來(lái)的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時(shí)，無(wú)須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。Web Storage 的兩個(gè)主要目標(biāo)是：
- 提供一種在 cookie 之外存儲(chǔ)會(huì)話數(shù)據(jù)的路徑。
- 提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制。
Web Storage 主要定義了兩種對(duì)象：sessionStorage 和 localStorage，是 Storage 對(duì)象的實(shí)例，這兩個(gè)對(duì)象區(qū)別如下：
- sessionStorage： 存儲(chǔ)特定于某個(gè)會(huì)話的數(shù)據(jù)，也就是該數(shù)據(jù)只保持到瀏覽器關(guān)閉。存儲(chǔ)數(shù)據(jù)大小大多數(shù)限制在 2.5M，少數(shù)瀏覽器限制在 5M 或者不限制。
- localStorage： 數(shù)據(jù)保存到通過(guò) JavaScript 刪除或者是用戶清除瀏覽器緩存。存儲(chǔ)數(shù)據(jù)大小大多數(shù)限制在 5M，少數(shù)瀏覽器限制在 2.5M 或者不限制。
Storage 類型有如下方法：
- clear()： 刪除所有值。
- getItem(name)： 根據(jù)指定的名字 name 獲取對(duì)應(yīng)的值。
- key(index)： 獲取 index 位置處的值的名字。
- removeItem(name)： 刪除由 name 指定的鍵值對(duì)。
- setItem(name, value)： 為指定的 name 設(shè)置一個(gè)對(duì)應(yīng)的值，值為字符串。
對(duì) sessionStorage 和 localStorage 進(jìn)行操作都會(huì)觸發(fā) storage 事件，該事件對(duì)象有以下屬性：
- domain： 發(fā)生變化的存儲(chǔ)空間的域名。
- key： 設(shè)置或者刪除的鍵名。
- newValue： 如果是設(shè)置值，則是新值；如果是刪除鍵，則是null。
- oldValue： 鍵被更改之前的值。
IndexedDB
Indexed Database API，簡(jiǎn)稱為 IndexedDB，是在瀏覽器中保存結(jié)構(gòu)化數(shù)據(jù)的一種數(shù)據(jù)庫(kù)。其思想是創(chuàng)建一套 API，方便保存和讀取 JavaScript 對(duì)象，同時(shí)還支持查詢和搜索。
IndexedDB 設(shè)計(jì)的操作完全是異步進(jìn)行的。因此，大多數(shù)操作會(huì)以請(qǐng)求方式進(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"
}
];
// 打開(kāi)數(shù)據(jù)庫(kù)
request = indexedDB.open("example");
// 注冊(cè) 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ù)庫(kù)
initializeDatabase();
};
function initializeDatabase() {
if (database.version != "1.0") {
// 設(shè)置數(shù)據(jù)庫(kù)版本號(hào)
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)建對(duì)象存儲(chǔ)空間
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() 將存儲(chǔ)空間傳入事務(wù)
request = database.transaction("users").objectStore("users").get("007");
request.onsuccess = function (event) {
alert(event.target.result.firstName);
};
}
}
限制
- 和 Web Storage類似，只能由同源（相同協(xié)議、域名和端口）頁(yè)面操作，因此不能跨域共享信息。
- Firefox 大小上限為 50M，移動(dòng)端的 Firefox 大小上限為 5M，不允許本地文件訪問(wèn)。
- Chrome 大小上限為 5M，允許本地文件訪問(wèn)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
