溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
如何在HTML5中實(shí)現(xiàn)客戶端存儲(chǔ)？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
離線檢測(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，是專門(mén)為開(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)。
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼