前端緩存-IndexedDB

IndexedDB 就是瀏覽器提供的本地數據庫，它能夠被網頁腳本建立和操做。IndexedDB 容許儲存大量數據，提供查找接口，還能創建索引。這些都是 LocalStorage 所不具有的。就數據庫類型而言，IndexedDB 不屬於關係型數據庫（不支持 SQL 查詢語句），更接近 NoSQL 數據庫。

IndexedDB 具備如下特色：

（1）鍵值對儲存。 IndexedDB 內部採用對象倉庫（object store）存放數據。全部類型的數據均可以直接存入，包括 JavaScript 對象。對象倉庫中，數據以"鍵值對"的形式保存，每個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能有重複，不然會拋出一個錯誤。

（2）異步。 IndexedDB 操做時不會鎖死瀏覽器，用戶依然能夠進行其餘操做，這與 LocalStorage 造成對比，後者的操做是同步的。異步設計是爲了防止大量數據的讀寫，拖慢網頁的表現。

（3）支持事務。 IndexedDB 支持事務（transaction），這意味着一系列操做步驟之中，只要有一步失敗，整個事務就都取消，數據庫回滾到事務發生以前的狀態，不存在只改寫一部分數據的狀況。

（4）同源限制 IndexedDB 受到同源限制，每個數據庫對應建立它的域名。網頁只能訪問自身域名下的數據庫，而不能訪問跨域的數據庫。

（5）儲存空間大 IndexedDB 的儲存空間比 LocalStorage 大得多，通常來講很多於 250MB，甚至沒有上限。

（6）支持二進制儲存。 IndexedDB 不只能夠儲存字符串，還能夠儲存二進制數據（ArrayBuffer 對象和 Blob 對象）。

IndexedDB操做步聚：
var db; //定義數據庫實例
var indexedDBInstance = {

//開打數據庫

OpenDB: function() {

//打開數據庫[open(參數1，參數2) 參數1：表示數據庫名稱 參數2：表示數據庫版本]

var resquest = window.indexedDB.open("h5", 1); //返回IDBRequest 對象，IDBRequest 對象 三個事件：error、success、upgradeneeded

resquest.onerror = function() {

//error失敗事件

};

resquest.onupgradeneeded = function(event) {

//upgradeneeded事件[當指定數據庫版本大於當前版本時 觸發版本升級事件]

//新建數據庫與打開數據庫是同一個操做。若是指定的數據庫不存在，就會新建。不一樣之處在於，後續的操做主要在upgradeneeded事件的監聽函數裏面完成，由於這時版本從無到有，因此會觸發這個事件

db = event.target.result; //獲取數據庫實例對象

//建立表 必須在onupgradeneeded 回調中 調用

// var objectstore = indexedDBInstance.CreateTable("User", {

// keyPath: "id"

// }, 'test');

var objectstore = indexedDBInstance.CreateTable('User', {

autoIncrement: true

}, "test");

//建立索引

var index = indexedDBInstance.CreateIndex(objectstore);

};

resquest.onsuccess = function(event) {

//success成功事件

db = event.target.result; //獲取數據庫實例對象

console.log('數據庫打開成功');

};

},

CreateTable: function(tableName, pk, transname) {

///<summary>

///建立表

///<param name="tableName">表名</param>

///<param name="pk">設置主鍵對象</param>

///<param name="transname">事物名稱</param>

///</summary>

if (db) {

if (!db.objectStoreNames.contains(tableName, transname)) {

//pk:{ keyPath: 'id' } 表示主鍵爲ID

//pk:{ autoIncrement: true } 表示主鍵自增加

//pk:{keyPath:'foo.bar'}主鍵也能夠指定爲下一層對象的屬性，好比{ foo: { bar: 'baz' } }的foo.bar也能夠指定爲主鍵。

return db.createObjectStore(tableName, pk); //返回表對象

}

}

},

CreateIndex: function(objectstore) {

//createIndex()的三個參數分別爲索引名稱、索引所在的屬性、配置對象（說明該屬性是否包含重複的值）

objectstore.createIndex('name', 'Name', {

unique: false

});

objectstore.createIndex('qq', 'QQ', {

unique: true

});

},

AddData: function() {

///<summary>

///添加數據

///</summary>

var request = db.transaction(['User'], 'readwrite')

.objectStore('User')

.add({

id: 1,

Name: '張三',

QQ: '865110135'

});

request.onsuccess = function(event) {

console.log('數據寫入成功');

};

request.onerror = function(event) {

console.log('數據寫入失敗');

}

},

EditData: function() {

///<summary>

///編輯數據

///</summary>

var request = db.transaction(['User'], 'readwrite')

.objectStore('User')

.put({

id: 1,

Name: 'tome',

QQ: '865110135'

});

request.onsuccess = function(event) {

console.log('數據更新成功');

};

request.onerror = function(event) {

console.log('數據更新失敗');

}

},

ReadData: function() {

///<summary>

///獲取單條數據

///</summary>

//get(參數1) ； 參數1：鍵值

var request = db.transaction(['User']).objectStore('User').get(1);

request.onerror = function(event) {

console.log('事務失敗');

};

request.onsuccess = function(event) {

if (request.result) {

console.log('Name: ' + request.result.Name);

console.log('QQ: ' + request.result.QQ);

} else {

console.log('未得到數據記錄');

}

};

},

ReadAllData: function() {

///<summary>

///獲取全部數據

///</summary>

var objectStore = db.transaction(['User']).objectStore('User');

objectStore.openCursor().onsuccess = function(event) {

var cursor = event.target.result;

if (cursor) {

console.log('Id: ' + cursor.key);

console.log('Name: ' + cursor.value.Name);

console.log('QQ: ' + cursor.value.QQ);

cursor.continue();

} else {

console.log('沒有更多數據了！');

}

};

},

DelData: function() {

///<summary>

///刪除數據

///</summary>

var request = db.transaction(['User'], 'readwrite')

.objectStore('User')

.delete(1); //刪除主鍵爲1的數據

request.onsuccess = function(event) {

console.log('數據刪除成功');

};

},

Clear: function() {

///<summary>

///清空數據

///</summary>

var transaction = db.transaction(['User'], 'readwrite');

var store = transaction.objectStore('User');

store.clear();

},

DelObjectStore: function() {

///<summary>

///刪除表[執行此全動做必須發生在版本變動動做中]

///</summary>

db.deleteObjectStore('User');

},

DelDB: function() {

///<summary>

///刪除庫

///</summary>

window.indexedDB.deleteDatabase("h5");

}

}