溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)HTML5離線應(yīng)用與客戶端存儲的實(shí)現(xiàn)方式，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
支持離線 Web 應(yīng)用開發(fā)是 HTML5 的另一個(gè)重點(diǎn)。所謂離線 Web 應(yīng)用，就是在設(shè)備不能上網(wǎng)的情況下仍然可以運(yùn)行的應(yīng)用。
開發(fā)離線Web 應(yīng)用需要幾個(gè)步驟。首先是確保應(yīng)用知道設(shè)備是否能上網(wǎng)，以便下一步執(zhí)行正確的操作。然后，應(yīng)用還必須能訪問一定的資源（圖像、Javascript、CSS等），只有這樣才能正常工作。最好，必須有一塊本地空間用戶保存數(shù)據(jù)，無論能否上網(wǎng)都不妨礙讀寫。
HTML5 及其相關(guān)的 API讓開發(fā)離線應(yīng)用成為現(xiàn)實(shí)。
離線檢測
要知道設(shè)備是否在線還是離線，HTML5 定義了一個(gè) navigator.onLine 屬性，這個(gè)屬性值為 true 表示設(shè)備能上網(wǎng)，值為 false 表示設(shè)備離線。
if (navigator.onLine) {
// 正常工作
} else {
// 執(zhí)行離線狀態(tài)時(shí)的任務(wù)
}由于 navigator.onLine 存在一定的兼容性問題，因此除了 navigator.onLine 屬性之外，為了更好地確定網(wǎng)絡(luò)是否可用，HTML5 還定義了兩個(gè)事件 online 和 offline。
當(dāng)網(wǎng)絡(luò)在離線和在線之間切換時(shí)在 window 對象上觸發(fā)這兩個(gè)事件：
window.addEventListener('online', function() {
// 正常工作
});
window.addEventListener('offline', function() {
// 執(zhí)行離線狀態(tài)時(shí)的任務(wù)
});在實(shí)際應(yīng)用中，最好在頁面加載后，最好先通過 navigator.onLine 取得初始的狀態(tài)。然后通過上述兩個(gè)事件來確定網(wǎng)絡(luò)連接狀態(tài)是否變化。當(dāng)上述事件觸發(fā)時(shí)，navigator.onLine 屬性的值也會改變，不過必須要手工輪詢這個(gè)屬性才能檢測到網(wǎng)絡(luò)狀態(tài)的變化。
應(yīng)用緩存
HTML5 的應(yīng)用緩存（application cache），或者簡稱為 appcache，是專門為開發(fā)離線 Web 應(yīng)用而設(shè)計(jì)的。Appcache 就是從瀏覽器的緩存中分出來的一塊緩存區(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 對象，這個(gè)對象有一個(gè) 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)用緩存查找更新時(shí)觸發(fā)
error： 在檢查更新或者下載資源期間發(fā)生錯(cuò)誤時(shí)觸發(fā)
noupdate： 在檢查描述文件發(fā)現(xiàn)文件無變化時(shí)觸發(fā)
downloading： 在開始下載應(yīng)用緩存資源時(shí)觸發(fā)
progress： 在文件下載應(yīng)用緩存的過程中持續(xù)不斷地觸發(fā)
updateready： 在頁面新的應(yīng)用緩存下載完畢且可以通過 swapCache() 使用時(shí)觸發(fā)
cached： 在應(yīng)用緩存完整可用時(shí)觸發(fā)
一般來講，這些事件會隨著頁面加載按上述順序依次觸發(fā)。也可以通過調(diào)用 update() 方法手動(dòng)觸發(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 的會話信息，之后為每個(gè)請求添加 Cookie HTTP 頭將信息發(fā)送回服務(wù)器，如下所示：
GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value
發(fā)送回服務(wù)器的額外信息可以用于唯一驗(yàn)證客戶來自于發(fā)送的哪個(gè)請求。
完整的 cookie 包括：
名稱： 一個(gè)唯一確定 cookie 的名稱。必須被 URL 編碼。
值： 存儲在 cookie 中的字符串值。必須被 URL 編碼。
域： cookie 對于哪個(gè)域是有效的。
路徑： 對于指定域中的那個(gè)路徑，應(yīng)該向服務(wù)器發(fā)送 cookie。
失效時(shí)間： 表示 cookie 何時(shí)應(yīng)該被刪除的時(shí)間戳。
安全標(biāo)志： 指定后，cookie 只有在使用 SSL 連接的時(shí)候才發(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ù)雜，這是因?yàn)?document.cookie 屬性在不同的使用方式中表現(xiàn)出不同的行為。
當(dāng)用來獲取屬性值時(shí)，document.cookie 返回當(dāng)前頁面可用的所有 cookie 字符串，一系列由分號隔開的鍵值對，如下所示：
document.cookie // name1=value1;name2=value2;name3=value3;
當(dāng)用來設(shè)置值時(shí)，document.cookie 屬性會設(shè)置一個(gè)新的 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());大小限制
每個(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 帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時(shí)，無須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。Web Storage 的兩個(gè)主要目標(biāo)是：
提供一種在 cookie 之外存儲會話數(shù)據(jù)的路徑。
提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機(jī)制。
Web Storage 主要定義了兩種對象：sessionStorage 和 localStorage，是 Storage 對象的實(shí)例，這兩個(gè)對象區(qū)別如下：
sessionStorage： 存儲特定于某個(gè)會話的數(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è)置一個(gè)對應(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 對象，同時(shí)還支持查詢和搜索。
IndexedDB 設(shè)計(jì)的操作完全是異步進(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，移動(dòng)端的 Firefox 大小上限為 5M，不允許本地文件訪問。
Chrome 大小上限為 5M，允許本地文件訪問。
關(guān)于HTML5離線應(yīng)用與客戶端存儲的實(shí)現(xiàn)方式就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼