HTML5存儲之 indexedDB

 IndexeDB是HTML5 重要的一部分,它是一種輕量級的NOSQL數據庫.對建立具備豐富本地存儲數據的數據密集型的離線HTML5 Web 應用程序頗有用. 

IndexedDB是爲了可以在客戶端存儲大量的結構化數據，而且使用索引高效檢索的API。同時還有助於本地緩存數據,是Web應用程序能夠更快的運行和相應,提升用戶的體驗度.

那麼說了這麼多,IndexedDB這個究竟是個什麼東東呢 ？ 我我的理解IndexedDB 就是一種能在瀏覽器中持久地存儲結構化數據的數據庫,而且爲WEB應用提供了豐富的查詢能力.

若是你想要了解更多,請點擊https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB

概念:

一個網站可能有一個或多個 IndexedDB 數據庫，每一個數據庫必須具備唯一的名稱。

一個數據庫可包含一個或多個對象存儲。一個對象存儲（由一個名稱唯一標識）是一個記錄集合。每一個記錄有一個鍵 和一個值。該值是一個對象，可擁有一個或多個屬性。鍵可能基於某個鍵生成器，從一個鍵路徑衍生出來，或者是顯式設置。一個鍵生成器自動生成唯一的連續正整數。鍵路徑定義了鍵值的路徑。它能夠是單個 JavaScript 標識符或多個由句點分隔的標識符。

在IndexedDB大部分操做並非咱們經常使用的調用方法，返回結果的模式，而是請求——響應的模式，好比打開數據庫的操做.

規範中包含一個異步 API 和一個同步 API。同步 API 用於 Web 瀏覽器中。異步 API 使用請求和回調。

IndexedDB遵循同源策略。所以,儘管您能夠訪問存儲的數據在一個領域,你不能訪問數據在不一樣的領域。

好了說了這麼多,下面咱們 就來真正瞭解它吧!

 咱們在打開IndexedDB以前,咱們要先判斷一下它是否支持的如今的瀏覽器.

window.indexedDB=window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB;

if(window.indexedDB){
alert("您的瀏覽器支持IndexedDB數據庫。");
} else{
alert("您的瀏覽器不支持IndexedDB數據庫。");
}

判斷完成以後咱們就能夠開始進行下面的操做.

indexedDB 打開數據庫的方法只有一種.就是 open 用於打開指定的數據庫.

語法:request對象 = window.indexedDB.open(數據庫名, 數據庫版本號)

var dbName = "mysql";

var request = window.indexedDB.open(dbName,1.0); // 數據庫版本可寫可不寫,默認0

在控制檯打印 

 

處理錯誤或異常和調試

幾乎全部咱們產生的請求咱們在處理的時候首先要作的就是添加成功和失敗處理函數：

全部異步請求都有一個 onsuccess 回調和一個 onerror 回調，前者在數據庫操做成功時調用，後者在一個操做未成功時調用。

request對象用於處理用戶對數據庫的操做請求。能夠經過它定義操做成功和失敗的處理函數。

repuest.onsuccess = function(event) {}; //異步成功處理函數

request.onerror = function(event){}； // 異步失敗處理函數

IndexedDB 很難調試和排除故障，由於在許多狀況下，錯誤消息是泛泛的，缺少信息價值。在開發應用程序時，可使用 console.log 調試。

IDBOpenDBRequest接口定一個幾個重要的屬性：

1.onerror: 請求失敗的回調函數句柄

2.onsuccess:請求成功的回調函數句柄

3.onupgradeneeded:請求數據庫版本變化句柄

1和2 上面已經說過了 ，onupgradeneeded 請求是在數據庫第一次被打開時；打開數據庫時指定的版本號高於當前被持久化的數據庫.的時候觸發。

使用數據庫

1. 建立 一個數據庫  （包括建立對象存儲空間）

function createDatabase(){
var request = var request = window.indexedDB.open(dbName);
request.onerror = function(){};
request.onsuccess = function(){};
request.onupqradeneeded = function(){
mydb=request.result;//得到數據庫實例對象
//判斷對象存儲空間名稱是否已經存在
if(!mydb.objectStoreNames.contains("students")) {
//建立students對象存儲空間;指定keyPath選項爲id（即主鍵爲id）
var objectStore = mydb.createObjectStore("students", {keyPath: "id"});
//對象存儲空間students的列email上建立一個惟一索引email,能夠建立多個索引。
// objectStore.createIndex("name","name",{unique:false}); 也能夠這樣 建立兩個索引
// objectStore.createIndex("phone","phone",{unique:false});
objectStore.createIndex("email", //索引名
　　　　　　　　　　　　　"email",//建立索引的列（即keyPath,索引屬性字段名）
　　　　　　　　　　　　　{ unique: true });//索引選項(索引屬性值是否惟一:true or false)
}
};
}

 

在增 ，刪，改，查 中都要用到事務的方法

／／－－－－－－－－－－－－－查詢數據－－－－－－－－－－

function get(mydb){
var transaction = mydb.transaction('students','readwrite');
transaction.oncomplete = function(event) {};
transaction.onerror = function(event) {};
transaction.onabort = function(event){};
var objStore = transaction.objectStore('students');
var request = objStore.get("110"); //按照id查詢
request.onsuccess=function(e){
alert(e.target.result.name + e.target.result.age + e.target.result.email);
}
}

 

／／－－－－－－－－－－更新數據－－－－－－－－－－－－－

function update(mydb){
var transaction = mydb.transaction('students','readwrite');
transaction.oncomplete = function(event) {};
transaction.onerror = function(event) {};
transaction.onabort = function(event){};
var objStore = transaction.objectStore('students');
var request = objStore.get("110");
request.onsuccess=function(e){
var student=e.target.result;

student.name='wwww1';
objStore.put(student);
}

 

／／－－－－－－－－－－－－－刪除 數據－－－－－－－－－－－－－－

function remove(mydb){
var transaction = mydb.transaction('students','readwrite');
transaction.oncomplete = function(event) {};
transaction.onerror = function(event) {};
transaction.onabort = function(event){};
var objStore = transaction.objectStore('students');
var request = objStore.delete("110"); ／／ 爲咱們提供的方法
request.onsuccess = function(e) {
alert("成功刪除數據");
};
}
}

 

／／－－－－－－－利用索引查詢－－－－－－－

function byIndexGet(mydb){
var transaction = mydb.transaction('students','readwrite');
transaction.oncomplete = function(event) {};
transaction.onerror = function(event) {};
transaction.onabort = function(event){};
var objStore = transaction.objectStore('students');
var index = objStore.index('email'); //索引名
var request=index.get('liming1@email.com'); //經過索引值獲取數據
request.onsuccess=function(e){
var student=e.target.result;

alert(student.name+"：索引查詢");

}
}

 

／／－－－－－－－－－－－－－－－遊標遍歷－－－－－－－－－－

//這是indexDB 裏面重要的部分 IndexedDB 中的遊標是雙向的，這提供了額外的靈活性。
//語法：var request=objStore.openCursor() ／／ 打開遊標
function byCursorGet(mydb){
var transaction = mydb.transaction('students','readwrite');
transaction.oncomplete = function(event) {};
transaction.onerror = function(event) {};
transaction.onabort = function(event){};
var objStore = transaction.objectStore('students');
var request=objStore.openCursor();//打開遊標
request.onsuccess = function(e){
var cursor = e.target.result;
if(cursor){
alert(cursor.value.name);
cursor.continue();
}else {
alert('遍歷完成');
}
}
}

 

／／－－－－－－－－－－經過範圍和排序條件，遊標遍歷符合條件的
下面是 一些參數的值
/**
* 範圍：
*（1）匹配等於指定鍵值的記錄：var range = IDBKeyRange.only(指定鍵值)
*（2）匹配小於指定鍵值的記錄：var range = IDBKeyRange.lowerBound(指定鍵值, 是否不包括指定鍵值)
*（3）匹配大於指定鍵值的記錄：var range = IDBKeyRange.upperBound(指定鍵值, 是否不包括指定鍵值)
*（4）匹配指定範圍內的記錄：var range = IDBKeyRange.bound(下限鍵值，上限鍵值，是否不包括下限鍵值，是否不包括上限鍵值
*/ 例如： // 只取得當前索引的值爲110的數據 IDBKeyRange.only("110");
// 只取得當前索引的值大於110，而且不包括110的數據
－－－－－－IDBKeyRange.lowerBound("110", true);
// 只取得當前索引的值小於110，而且包括110的數據
－－－－－－IDBKeyRange.upperBound("110", false);
// 取得當前索引的值介於110和120之間，而且包括110，但不包括120的數據
－－－－－IDBKeyRange.bound("110", "120", false, true);
/**
* 順序參數：
* IDBCursor.NEXT，順序循環； －－ 默認
* IDBCursor.NEXT_NO_DUPLICATE，順序循環且鍵值不重複；
* IDBCursor.PREV，倒序循環；
* IDBCursor.PREV _NO_DUPLICATE，倒序循環且鍵值不重複。
*/

下面是具體的代碼：

function byCursorGetForRangeAndSort(mydb){
var transaction = mydb.transaction('students','readwrite');
transaction.oncomplete = function(event) {};
transaction.onerror = function(event) {};
transaction.onabort = function(event){};
var objStore = transaction.objectStore('students');
var range = IDBKeyRange.bound("110", "113", false, true); //範圍
var request=objStore.openCursor(range, //範圍（能夠爲null或省略不寫） IDBCursor.NEXT); //遊標順序循環(能夠省略不寫)
request.onsuccess = function(e){
var cursor1 = e.target.result;
if(cursor1){
alert(cursor1.value.name);
cursor1.continue();
}else {
alert('遍歷完成');
}
}
}

 

／／－－－－－－－－－－－－－－－－清除數據庫－－－－－－－
window.indexedDB.deleteDatabase(dbName);
／／－－－－－－－－－－－－－－關閉鏈接
mydb.close(); //關閉鏈接

最後

 　　IndexedDB API 很是強大，您可使用它建立具備豐富本地存儲數據的數據密集型應用程序（尤爲是離線的 HTML5 Web 應用程序）。您還可使用 IndexedDB API 將數據緩存到本地，使傳統的在線 Web 應用程序（尤爲是移動 Web 應用程序）可以更快地運行和響應，從而消除每次從 Web 服務器檢索數據的需求。例如，能夠將選擇列表的數據緩存在 IndexedDB 數據庫中。

　　本文展現瞭如何管理 IndexedDB 數據庫，包括建立數據庫，刪除數據庫，以及創建與數據庫的鏈接。本文還展現了 IndexedDB API 的許多更高級的功能，包括事務處理、索引和遊標。您可使用這些展現的概念構建利用 IndexedDB API 的離線應用或移動 Web 應用程序。　　

　若是有什麼問題或者不對的地方，你們能夠留言。