支持離線 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 包括：
- 名稱： 一個唯一確定 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è)置 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，允許本地文件訪問。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
