HTML5存儲(chǔ)方式有哪些

發(fā)布時(shí)間：2021-06-18 10:15:32 來(lái)源：億速云閱讀：122 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“HTML5存儲(chǔ)方式有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5存儲(chǔ)方式有哪些”這篇文章吧。

本文主要和大家分享HTML5存儲(chǔ)方式小結(jié)，希望能幫助HTML5開(kāi)發(fā)者，也希望能幫助到大家更好的掌握HTML5存儲(chǔ)方式。

Cookies的野蠻生長(zhǎng)
本地存儲(chǔ)localstorage
本地存儲(chǔ)sessionstorage
離線緩存（application cache）
Web SQL
IndexedDB

Cookies的野蠻生長(zhǎng)

在HTML5出現(xiàn)之前，Cookies便占據(jù)了客戶端存儲(chǔ)的整個(gè)江山，就像是蠻荒時(shí)代的野蠻生長(zhǎng)，cookies很好、快速地滿足實(shí)際應(yīng)用的需求。但是它的問(wèn)題也很明顯，cookies會(huì)在請(qǐng)求頭上帶著數(shù)據(jù)，而且大小限制在4K以內(nèi)，這是非常不安全的，容易被外部截取，還存在domain污染。

IE瀏覽器特別喜歡搞自己的一套，對(duì)于增加存儲(chǔ)容量加入了UserData，大小是64K，但是其他瀏覽器不喜歡跟它玩，也就只有它自己一家支持。

那么，重點(diǎn)來(lái)了。既然cookies問(wèn)題那么多，就要想辦法解決，不然沒(méi)法繼續(xù)往前發(fā)展。首先要確認(rèn)它的問(wèn)題有哪些，然后根據(jù)這些問(wèn)題尋找解決方案。

解決4K存儲(chǔ)容量問(wèn)題
解決請(qǐng)求頭帶有存儲(chǔ)信息的問(wèn)題，也就是增加安全性，通過(guò)加密通道或方式進(jìn)行數(shù)據(jù)存儲(chǔ)和傳輸
解決關(guān)系型存儲(chǔ)的問(wèn)題
跨瀏覽器

本地存儲(chǔ)localstorage

存儲(chǔ)方式

以鍵值對(duì)（key-value）的方式存儲(chǔ)，永久存儲(chǔ)，永不失效，除非手動(dòng)刪除。

存儲(chǔ)容量

每個(gè)域名5M。

常用的API

getItem //取記錄

setItem //設(shè)置記錄

removeItem //移除記錄

key //取key所對(duì)應(yīng)的值

clear //清除記錄

本地存儲(chǔ)sessionstorage

HTML5的本地存儲(chǔ)API中的localstorage與sessionstorage在使用方法上是相同的，區(qū)別在于sessionstorage在關(guān)閉頁(yè)面后即被清空，而localstorage則會(huì)一直保存，除非手動(dòng)刪除。

離線緩存（application cache）

本地緩存應(yīng)用所需的文件

使用方法

1、配置manifest文件

頁(yè)面上：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

manifest文件：

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

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

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

完整demo

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js

NETWORK:
login.jsp

FALLBACK:
/html/ /offline.html

服務(wù)器上：manifest文件需要配置正確的MIME-type，即text/cache-manifest。

常用API

核心是applicationCache對(duì)象，有個(gè)status屬性，表示應(yīng)用緩存的當(dāng)前狀態(tài)：

0 （UNCACHED）：無(wú)緩存，沒(méi)有和頁(yè)面相關(guān)的應(yīng)用緩存

1 （IDLE）：閑置，應(yīng)用緩存沒(méi)有得到更新

2 （CHECKING）：檢查中，正在下載描述文件并檢查更新

3 （DOWNLOADING）：下載中，應(yīng)用緩存正在下載與描述文件中指定的資源

4 （UPDATEREADY）：更新完成，所有資源都已經(jīng)下載完畢

5 （IDLE）：廢棄，應(yīng)用緩存的描述文件已經(jīng)不存在了，因此頁(yè)面無(wú)法再訪問(wèn)應(yīng)用緩存

相關(guān)事件

表示應(yīng)用緩存狀態(tài)的改變：

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ù)不斷地下載時(shí)觸發(fā)

updateready：在頁(yè)面新的應(yīng)用緩存下載完畢時(shí)觸發(fā)

cached：在應(yīng)用緩存完整可用時(shí)觸發(fā)

application cache的三個(gè)優(yōu)勢(shì)：

離線瀏覽
提升頁(yè)面載入速度
降低服務(wù)器壓力

注意事項(xiàng)：

瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn)5M）
如果是manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過(guò)程將視為失敗，瀏覽器繼續(xù)全部使用舊的緩存
引用manifest的html必須與manifest文件同源，在同一個(gè)域下
瀏覽器會(huì)自動(dòng)緩存引用manifest文件的html文件，這就導(dǎo)致了如果更改了html內(nèi)容，也需要更新版本才能做到最新
manifest文件中的CACHE與NETWOrK、FALLBACK的位置順序沒(méi)有關(guān)系，如果是隱式聲明需要在最前面
FALLBACK中的資源必須和manifest文件同源
更新完版本后，必須刷新一次才會(huì)啟動(dòng)新版本（會(huì)出現(xiàn)重刷一次頁(yè)面的情況），需要添加監(jiān)聽(tīng)版本事件
站點(diǎn)中的其他頁(yè)面即使沒(méi)有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問(wèn)
當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新

離線緩存和傳統(tǒng)瀏覽器緩存的區(qū)別

離線緩存是針對(duì)整個(gè)應(yīng)用，瀏覽器緩存是單個(gè)文件
離線緩存可以主動(dòng)通知瀏覽器更新資源

Web SQL

Web SQL數(shù)據(jù)庫(kù)API并不是HTML5規(guī)范的一部分，但它是一個(gè)獨(dú)立的規(guī)范，引入了一組使用SQL操作客戶端數(shù)據(jù)庫(kù)的APIs。

核心方法

openDatabase：使用現(xiàn)有的數(shù)據(jù)庫(kù)或新建的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)對(duì)象
transaction：控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或回滾
executeSql：用于執(zhí)行實(shí)際的SQL查詢

打開(kāi)數(shù)據(jù)庫(kù)

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);

執(zhí)行查詢操作

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})

插入數(shù)據(jù)

注：博客主題里的代碼塊樣式

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

注：需要實(shí)現(xiàn)的代碼塊樣式，這個(gè)是 markdowpad2 里的操作，也是很多markdown寫作工具提供的操作，只需要按一下 tab 鍵，非常方便

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

讀取數(shù)據(jù)

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查詢記錄條數(shù): " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i < len; i++){
         alert(results.rows.item(i).name );
      }

   }, null);
});

IndexedDB

索引數(shù)據(jù)庫(kù)（IndexedDB）API（作為HTML5的一部分）對(duì)創(chuàng)建具有豐富本地存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)密集型的離線HTML5 Web應(yīng)用程序很有用，同時(shí)它還有助于本地緩存數(shù)據(jù)，使傳統(tǒng)在線Web應(yīng)用程序（比如移動(dòng)Web應(yīng)用程序）能夠快速的運(yùn)行和響應(yīng)。

異步API

在IndexedDB大部分操作并不是我們常用的調(diào)用方法（返回結(jié)果的模式），而是（請(qǐng)求-響應(yīng)模式），比如打開(kāi)數(shù)據(jù)庫(kù)的操作。

以上是“HTML5存儲(chǔ)方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

HTML5存儲(chǔ)方式有哪些

Cookies的野蠻生長(zhǎng)

本地存儲(chǔ)localstorage

本地存儲(chǔ)sessionstorage

離線緩存（application cache）

Web SQL

IndexedDB

猜你喜歡

最新資訊

相關(guān)推薦

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