溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5的IndexedDB索引數(shù)據(jù)庫的示例分析

發(fā)布時(shí)間:2021-09-17 16:55:10 來源:億速云 閱讀:117 作者:柒染 欄目:web開發(fā)

本篇文章給大家分享的是有關(guān)HTML5的IndexedDB索引數(shù)據(jù)庫的示例分析,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。

IndexedDB是HTML5 WEB數(shù)據(jù)庫,允許HTML5 WEB應(yīng)用在用戶瀏覽器端存儲(chǔ)數(shù)據(jù)。對(duì)于應(yīng)用來說IndexedDB非常強(qiáng)大、有用,可以在客戶端的chrome,IE,Firefox等WEB瀏覽器中存儲(chǔ)大量數(shù)據(jù)。
 
什么是IndexedDB
IndexedDB,HTML5新的數(shù)據(jù)存儲(chǔ),可以在客戶端存儲(chǔ)、操作數(shù)據(jù),可以使應(yīng)用加載地更快,更好地響應(yīng)。它不同于關(guān)系型數(shù)據(jù)庫,擁有數(shù)據(jù)表、記錄。它影響著我們?cè)O(shè)計(jì)和創(chuàng)建應(yīng)用程序的方式。IndexedDB 創(chuàng)建有數(shù)據(jù)類型和簡單的JavaScript持久對(duì)象的object,每個(gè)object可以有索引,使其有效地查詢和遍歷整個(gè)集合。本文為您提供了如何在Web應(yīng)用程序中使用IndexedDB的真實(shí)例子。
 
開始
我們需要在執(zhí)行前包含下面前置代碼

  1. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
        
    //prefixes of window.IDB objects   
    var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
    var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
        
    if (!indexedDB) {   
    alert("Your browser doesn't support a stable version of IndexedDB.")   
    }

 
打開IndexedDB
在創(chuàng)建數(shù)據(jù)庫之前,我們首先需要為數(shù)據(jù)庫創(chuàng)建數(shù)據(jù),假設(shè)我們有如下的用戶信息:

  1. var userData = [   
    { id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },   
    { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }   
    ];

現(xiàn)在我們需要用open()方法打開我們的數(shù)據(jù)庫:

  1. var db;   
    var request = indexedDB.open("databaseName", 1);   
        
    request.onerror = function(e) {   
    console.log("error: ", e);   
    };   
        
    request.onsuccess = function(e) {   
    db = request.result;   
    console.log("success: "+ db);   
    };   
    request.onupgradeneeded = function(e) {   
        
    }

如上所示,我們已經(jīng)打開了名為"databaseName",指定版本號(hào)的數(shù)據(jù)庫,open()方法有兩個(gè)參數(shù):
1.第一個(gè)參數(shù)是數(shù)據(jù)庫名稱,它會(huì)檢測(cè)名稱為"databaseName"的數(shù)據(jù)庫是否已經(jīng)存在,如果存在則打開它,否則創(chuàng)建新的數(shù)據(jù)庫。
2.第二個(gè)參數(shù)是數(shù)據(jù)庫的版本,用于用戶更新數(shù)據(jù)庫結(jié)構(gòu)。
 
onSuccess處理
發(fā)生成功事件時(shí)“onSuccess”被觸發(fā),如果所有成功的請(qǐng)求都在此處理,我們可以通過賦值給db變量保存請(qǐng)求的結(jié)果供以后使用。
 
onerror的處理程序
發(fā)生錯(cuò)誤事件時(shí)“onerror”被觸發(fā),如果打開數(shù)據(jù)庫的過程中失敗。
 
Onupgradeneeded處理程序
如果你想更新數(shù)據(jù)庫(創(chuàng)建,刪除或修改數(shù)據(jù)庫),那么你必須實(shí)現(xiàn)onupgradeneeded處理程序,使您可以在數(shù)據(jù)庫中做任何更改。 在“onupgradeneeded”處理程序中是可以改變數(shù)據(jù)庫的結(jié)構(gòu)的唯一地方。
 
創(chuàng)建和添加數(shù)據(jù)到表:
IndexedDB使用對(duì)象存儲(chǔ)來存儲(chǔ)數(shù)據(jù),而不是通過表。 每當(dāng)一個(gè)值存儲(chǔ)在對(duì)象存儲(chǔ)中,它與一個(gè)鍵相關(guān)聯(lián)。 它允許我們創(chuàng)建的任何對(duì)象存儲(chǔ)索引。 索引允許我們?cè)L問存儲(chǔ)在對(duì)象存儲(chǔ)中的值。 下面的代碼顯示了如何創(chuàng)建對(duì)象存儲(chǔ)并插入預(yù)先準(zhǔn)備好的數(shù)據(jù):

  1. request.onupgradeneeded = function(event) {   
    var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});   
    for (var i in userData) {   
    objectStore.add(userData[i]);    
    }   
    }

我們使用createObjectStore()方法創(chuàng)建一個(gè)對(duì)象存儲(chǔ)。 此方法接受兩個(gè)參數(shù): - 存儲(chǔ)的名稱和參數(shù)對(duì)象。 在這里,我們有一個(gè)名為"users"的對(duì)象存儲(chǔ),并定義了keyPath,這是對(duì)象唯一性的屬性。 在這里,我們使用“id”作為keyPath,這個(gè)值在對(duì)象存儲(chǔ)中是唯一的,我們必須確保該“ID”的屬性在對(duì)象存儲(chǔ)中的每個(gè)對(duì)象中存在。 一旦創(chuàng)建了對(duì)象存儲(chǔ),我們可以開始使用for循環(huán)添加數(shù)據(jù)進(jìn)去。
 
手動(dòng)將數(shù)據(jù)添加到表:
我們可以手動(dòng)添加額外的數(shù)據(jù)到數(shù)據(jù)庫中。

  1. function Add() {   
    var request = db.transaction(["users"], "readwrite").objectStore("users")   
    .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });   
        
    request.onsuccess = function(e) {   
    alert("Gautam has been added to the database.");   
    };   
      request.onerror = function(e) {   
    alert("Unable to add the information.");    
    }   
        
    }

之前我們?cè)跀?shù)據(jù)庫中做任何的CRUD操作(讀,寫,修改),必須使用事務(wù)。 該transaction()方法是用來指定我們想要進(jìn)行事務(wù)處理的對(duì)象存儲(chǔ)。 transaction()方法接受3個(gè)參數(shù)(第二個(gè)和第三個(gè)是可選的)。 第一個(gè)是我們要處理的對(duì)象存儲(chǔ)的列表,第二個(gè)指定我們是否要只讀/讀寫,第三個(gè)是版本變化。
 
從表中讀取數(shù)據(jù)
get()方法用于從對(duì)象存儲(chǔ)中檢索數(shù)據(jù)。 我們之前已經(jīng)設(shè)置對(duì)象的id作為的keyPath,所以get()方法將查找具有相同id值的對(duì)象。 下面的代碼將返回我們命名為“Bidulata”的對(duì)象:

  1. function Read() {   
    var objectStore = db.transaction(["users"]).objectStore("users");   
    var request = objectStore.get("2");   
    request.onerror = function(event) {   
    alert("Unable to retrieve data from database!");   
    };   
    request.onsuccess = function(event) {    
    if(request.result) {   
    alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);   
    } else {   
    alert("Bidulata couldn't be found in your database!");    
    }   
    };   
    }

 
從表中讀取所有數(shù)據(jù)
下面的方法檢索表中的所有數(shù)據(jù)。 這里我們使用游標(biāo)來檢索對(duì)象存儲(chǔ)中的所有數(shù)據(jù):

  1. function ReadAll() {   
    var objectStore = db.transaction("users").objectStore("users");    
    var req = objectStore.openCursor();   
    req.onsuccess = function(event) {   
    db.close();   
    var res = event.target.result;   
    if (res) {   
    alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);   
    res.continue();   
    }   
    };   
    req.onerror = function (e) {   
    console.log("Error Getting: ", e);   
    };    
    }

該openCursor()用于遍歷數(shù)據(jù)庫中的多個(gè)記錄。 在continue()函數(shù)中繼續(xù)讀取下一條記錄。
刪除表中的記錄
下面的方法從對(duì)象中刪除記錄。

  1. function Remove() {    
    var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");   
    request.onsuccess = function(event) {   
    alert("Tapas's entry has been removed from your database.");   
    };   
    }

我們要將對(duì)象的keyPath作為參數(shù)傳遞給delete()方法。
 
最終代碼
下面的方法從對(duì)象源中刪除一條記錄:

<!DOCTYPE html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>IndexedDB</title>  
<script type="text/javascript">  
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
    
//prefixes of window.IDB objects   
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
    
if (!indexedDB) {   
alert("Your browser doesn't support a stable version of IndexedDB.")   
}   
var customerData = [   
{ id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },   
{ id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }   
];   
var db;   
var request = indexedDB.open("newDatabase", 1);   
    
request.onerror = function(e) {   
console.log("error: ", e);   
};   
    
request.onsuccess = function(e) {   
db = request.result;   
console.log("success: "+ db);   
};   
    
request.onupgradeneeded = function(event) {   
    
}   
request.onupgradeneeded = function(event) {   
var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});   
for (var i in userData) {   
objectStore.add(userData[i]);    
}   
}   
function Add() {   
var request = db.transaction(["users"], "readwrite")   
.objectStore("users")   
.add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });   
    
request.onsuccess = function(e) {   
alert("Gautam has been added to the database.");   
};   
    
request.onerror = function(e) {   
alert("Unable to add the information.");    
}   
    
}   
function Read() {   
var objectStore = db.transaction("users").objectStore("users");   
var request = objectStore.get("2");   
request.onerror = function(event) {   
alert("Unable to retrieve data from database!");   
};   
request.onsuccess = function(event) {    
if(request.result) {   
alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);   
} else {   
alert("Bidulata couldn't be found in your database!");    
}   
};   
}   
function ReadAll() {   
var objectStore = db.transaction("users").objectStore("users");    
var req = objectStore.openCursor();   
req.onsuccess = function(event) {   
db.close();   
var res = event.target.result;   
if (res) {   
alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);   
res.continue();   
}   
};   
req.onerror = function (e) {   
console.log("Error Getting: ", e);   
};    
}   
function Remove() {    
var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");   
request.onsuccess = function(event) {   
alert("Tapas's entry has been removed from your database.");   
};   
}   
</script>  
</head>  
    
<body>  
<button onclick="Add()">Add record</button>  
<button onclick="Remove()">Delete record</button>  
<button onclick="Read()">Retrieve single record</button>  
<button onclick="ReadAll()">Retrieve all records</button>  
</body>  
</html>


localStorage是不帶lock功能的。那么要實(shí)現(xiàn)前端的數(shù)據(jù)共享并且需要lock功能那就需要使用其它本儲(chǔ)存方式,比如indexedDB。indededDB使用的是事務(wù)處理的機(jī)制,那實(shí)際上就是lock功能。
  做這個(gè)測(cè)試需要先簡單的封裝下indexedDB的操作,因?yàn)閕ndexedDB的連接比較麻煩,而且兩個(gè)測(cè)試頁面都需要用到

  1. //db.js   
    //封裝事務(wù)操作   
    IDBDatabase.prototype.doTransaction=function(f){   
      f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));   
    };   
    //連接數(shù)據(jù)庫,成功后調(diào)用main函數(shù)   
    (function(){   
      //打開數(shù)據(jù)庫   
      var cn=indexedDB.open("TestDB",1);   
      //創(chuàng)建數(shù)據(jù)對(duì)象   
      cn.onupgradeneeded=function(e){   
        e.target.result.createObjectStore("Obj");   
      };   
      //數(shù)據(jù)庫連接成功   
      cn.onsuccess=function(e){   
        main(e.target.result);   
      };   
    })();   
      接著是兩個(gè)測(cè)試頁面   
    <script src="db.js"></script>  
    <script>  
    //a.html   
    function main(e){   
      (function callee(){   
        //開始一個(gè)事務(wù)   
        e.doTransaction(function(e){   
          e.put(1,"test"); //設(shè)置test的值為1   
          e.put(2,"test"); //設(shè)置test的值為2   
        });   
        setTimeout(callee);   
      })();   
    };   
    </script>  
    <script src="db.js"></script>  
    <script>  
    //b.html   
    function main(e){   
      (function callee(){   
        //開始一個(gè)事務(wù)   
        e.doTransaction(function(e){   
          //獲取test的值   
          e.get("test").onsuccess=function(e){   
            console.log(e.target.result);   
          };   
        });   
        setTimeout(callee);   
      })();   
    };   
    </script>

把localStorage換成了indexedDB事務(wù)處理。但是結(jié)果就不同

HTML5的IndexedDB索引數(shù)據(jù)庫的示例分析

測(cè)試的時(shí)候b.html中可能不會(huì)立即有輸出,因?yàn)閕ndexedDB正忙著處理a.html東西,b.html事務(wù)丟在了事務(wù)丟隊(duì)列中等待。但是無論如何,輸出結(jié)果也不會(huì)是1這個(gè)值。因?yàn)閕ndexedDB的最小處理單位是事務(wù),而不是localStorage那樣以表達(dá)式為單位。這樣只要把lock和unlock之間需要處理的東西放入一個(gè)事務(wù)中即可實(shí)現(xiàn)。另外,瀏覽器對(duì)indexedDB的支持不如localStorage,所以使用時(shí)還得考慮瀏覽器兼容。

以上就是HTML5的IndexedDB索引數(shù)據(jù)庫的示例分析,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

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

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI