html5三種在客戶端存儲(chǔ)數(shù)據(jù)的實(shí)例

發(fā)布時(shí)間：2020-07-08 17:06:33 來源：億速云閱讀：178 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)html5幾種在客戶端存儲(chǔ)數(shù)據(jù)的實(shí)例，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

1.Application Cache

HTML5引入應(yīng)用緩存，意味著web應(yīng)用可以進(jìn)行緩存，即使在沒有網(wǎng)絡(luò)的情況下也能使用。

application cache有三個(gè)特點(diǎn)

離線瀏覽
已緩存的資源加載速度更快
減少服務(wù)器負(fù)載，瀏覽器將只從服務(wù)器下載更新過或更改過的資源

使用方法就是在 html標(biāo)簽中添加一個(gè)manifest屬性

每個(gè)指定了 manifest 的頁面在用戶對(duì)其訪問時(shí)都會(huì)被緩存。如果未指定 manifest 屬性，則頁面不會(huì)被緩存（除非在 manifest 文件中直接指定了該頁面）。

manifest 文件的建議的文件擴(kuò)展名是：".appcache"。

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
   The content of the document......
</body>
</html>

manifest 文件是簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。

manifest 文件可分為三個(gè)部分：

CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存
FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）

一個(gè)完整的manifest文件

CACHE MANIFEST  
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html

2.localStorage & sessionStorage

HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：

localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來傳遞，這使得 cookie 速度很慢而且效率也不高。

localStorage和sessionStorage都具有相同的操作方法，例如setItem()、getItem()和removeItem()等
localStorage和sessionStorage的方法：

setItem存儲(chǔ)value
用途：將value存儲(chǔ)到key字段
用法：.setItem( key, value)
代碼示例：

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem獲取value
用途：獲取指定key本地存儲(chǔ)的值
用法：.getItem(key)
代碼示例：

var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

removeItem刪除key
用途：刪除指定key本地存儲(chǔ)的值
用法：.removeItem(key)
代碼示例：

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()

sessionStorage不是一種持久化存儲(chǔ)，瀏覽器關(guān)閉之后會(huì)隨之清除。而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。

3.indexDB

indexDB是一種輕量級(jí)NOSQL數(shù)據(jù)庫。相比web sql(sqlite)更加高效，包括索引、事務(wù)處理和健壯的查詢功能。

它的特點(diǎn)包括：

一個(gè)網(wǎng)站可能有一個(gè)或多個(gè) IndexedDB 數(shù)據(jù)庫，每個(gè)數(shù)據(jù)庫必須具有惟一的名稱。
一個(gè)數(shù)據(jù)庫可包含一個(gè)或多個(gè)對(duì)象存儲(chǔ)。一個(gè)對(duì)象存儲(chǔ)（由一個(gè)名稱惟一標(biāo)識(shí)）是一個(gè)記錄集合。每個(gè)記錄有一個(gè)鍵和一個(gè)值。該值是一個(gè)對(duì)象，可擁有一個(gè)或多個(gè)屬性。鍵可能基于某個(gè)鍵生成器，從一個(gè)鍵路徑衍生出來，或者是顯式設(shè)置。一個(gè)鍵生成器自動(dòng)生成惟一的連續(xù)正整數(shù)。鍵路徑定義了鍵值的路徑。它可以是單個(gè) JavaScript 標(biāo)識(shí)符或多個(gè)由句點(diǎn)分隔的標(biāo)識(shí)符。(有點(diǎn)像列數(shù)據(jù)庫的特點(diǎn))
IndexedDB中，幾乎所有的操作都是采用了command->request->result的方式。比如查詢一條記錄，返回一個(gè)request，在request的result中得到查詢結(jié)果。又比如打開數(shù)據(jù)庫，返回一個(gè)request，在request的result中得到返回的數(shù)據(jù)庫引用。
indexedDB需要放到web服務(wù)器上才可以運(yùn)行。

以上就是html5幾種在客戶端存儲(chǔ)數(shù)據(jù)的實(shí)例，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

html5三種在客戶端存儲(chǔ)數(shù)據(jù)的實(shí)例

1.Application Cache

使用方法就是在 html標(biāo)簽中添加一個(gè)manifest屬性

2.localStorage & sessionStorage

3.indexDB

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽