HTML5存儲方式有哪些

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

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供洪洞網(wǎng)站建設(shè)、洪洞做網(wǎng)站、洪洞網(wǎng)站設(shè)計、洪洞網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、洪洞企業(yè)網(wǎng)站模板建站服務(wù)，10余年洪洞做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

  1. Cookies的野蠻生長

  2. 本地存儲localstorage

  3. 本地存儲sessionstorage

  4. 離線緩存（application cache）

  5. Web SQL

  6. IndexedDB

Cookies的野蠻生長

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

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

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

  • 解決4K存儲容量問題

  • 解決請求頭帶有存儲信息的問題，也就是增加安全性，通過加密通道或方式進(jìn)行數(shù)據(jù)存儲和傳輸

  • 解決關(guān)系型存儲的問題

  • 跨瀏覽器

本地存儲localstorage

存儲方式

以鍵值對（key-value）的方式存儲，永久存儲，永不失效，除非手動刪除。

存儲容量

每個域名5M。

常用的API

getItem //取記錄

setItem //設(shè)置記錄

removeItem //移除記錄

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

clear //清除記錄

本地存儲sessionstorage

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

離線緩存（application cache）

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

使用方法

1、配置manifest文件

頁面上：

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

manifest文件：

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

manifest文件分為三個部分：

  1. CACHE MANIFEST-在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

  2. NETWOrK-在此標(biāo)題下的文件需要與服務(wù)器進(jìn)行連接，且不會被緩存

  3. FALLBACK-在此標(biāo)題下的文件規(guī)定當(dāng)頁面無法被訪問時的回退頁面（比如404頁面）

完整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對象，有個status屬性，表示應(yīng)用緩存的當(dāng)前狀態(tài)：

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

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

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

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

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

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

相關(guān)事件

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

checking：在瀏覽器為應(yīng)用緩存查找更新時觸發(fā)

error：在檢查更新或下載資源期間發(fā)生錯誤時觸發(fā)

noupdate：在檢查描述文件發(fā)現(xiàn)文件無變化時觸發(fā)

downloading：在開始下載應(yīng)用緩存資源時觸發(fā)

progress：在文件下載應(yīng)用緩存的過程中持續(xù)不斷地下載時觸發(fā)

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

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

application cache的三個優(yōu)勢：

  1. 離線瀏覽

  2. 提升頁面載入速度

  3. 降低服務(wù)器壓力

注意事項(xiàng)：

  1. 瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個站點(diǎn)5M）

  2. 如果是manifest文件，或者內(nèi)部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續(xù)全部使用舊的緩存

  3. 引用manifest的html必須與manifest文件同源，在同一個域下

  4. 瀏覽器會自動緩存引用manifest文件的html文件，這就導(dǎo)致了如果更改了html內(nèi)容，也需要更新版本才能做到最新

  5. manifest文件中的CACHE與NETWOrK、FALLBACK的位置順序沒有關(guān)系，如果是隱式聲明需要在最前面

  6. FALLBACK中的資源必須和manifest文件同源

  7. 更新完版本后，必須刷新一次才會啟動新版本（會出現(xiàn)重刷一次頁面的情況），需要添加監(jiān)聽版本事件

  8. 站點(diǎn)中的其他頁面即使沒有設(shè)置manifest屬性，請求的資源如果在緩存中也從緩存中訪問

  9. 當(dāng)manifest文件發(fā)生改變時，資源請求本身也會觸發(fā)更新

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

  1. 離線緩存是針對整個應(yīng)用，瀏覽器緩存是單個文件

  2. 離線緩存可以主動通知瀏覽器更新資源

Web SQL

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

核心方法

  1. openDatabase：使用現(xiàn)有的數(shù)據(jù)庫或新建的數(shù)據(jù)庫創(chuàng)建一個數(shù)據(jù)庫對象

  2. transaction： 控制一個事務(wù)，以及基于這種情況執(zhí)行提交或回滾

  3. executeSql：用于執(zhí)行實(shí)際的SQL查詢

打開數(shù)據(jù)庫

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)的代碼塊樣式，這個是 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ù)庫（IndexedDB）API（作為HTML5的一部分）對創(chuàng)建具有豐富本地存儲數(shù)據(jù)的數(shù)據(jù)密集型的離線HTML5 Web應(yīng)用程序很有用，同時它還有助于本地緩存數(shù)據(jù)，使傳統(tǒng)在線Web應(yīng)用程序（比如移動Web應(yīng)用程序）能夠快速的運(yùn)行和響應(yīng)。

異步API

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

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

新聞名稱：HTML5存儲方式有哪些
瀏覽地址：http://bm7419.com/article0/igdeio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站制作、面包屑導(dǎo)航、域名注冊、微信小程序、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)