前端存儲 (4) - IndexDB

IndexDB的出現 是爲了存儲更大量的結構化數據

demo地址

簡介

IndexedDB是一個事務型數據庫系統，相似於基於SQL的RDBMS。 然而不一樣的是它使用固定列表（只有 key，value），IndexedDB是一個基於JavaScript的面向對象的數據庫。
IndexedDB容許您存儲和檢索用鍵索引的對象; 能夠存儲structured clone algorithm支持的任何對象。
您只須要指定數據庫模式，打開與數據庫的鏈接，而後檢索和更新一系列事務中的數據。

IndexedDB 是非關係型數據庫

IndexDB 和 WebSql的差異

WebSql 是關係型數據庫， 前端須要寫sql ，目前 WebSql已經瀏覽器基本已經放棄

基本使用

1.打開數據庫而且開始一個事務。
2.建立一個 object store。
3.構建一個請求來執行一些數據庫操做，像增長或提取數據等。
4.經過監聽正確類型的 DOM 事件以等待操做完成。
5.在操做結果上進行一些操做（能夠在 request 對象中找到）

var dbName = "the_name";
var db ;

// 鏈接數據庫，沒有就建立數據庫
var request = indexedDB.open(dbName, 2);

request.onsuccess = function(event){

    db = request.result;
}
// 錯誤處理程序在這裏。
request.onerror = function(event) {
    console.log(event);
};
request.onupgradeneeded = function(event) {

  db = event.target.result;
  // 建立一個對象存儲空間來, 自增主鍵
  var objectStore = db.createObjectStore("customers");
};


// 添加數據
var customerData = [
  { id:"1", name: "Bill", age: 35, email: "bill@company.com" },
  {  id:"2", name: "Donna", age: 32, email: "donna@home.org" }
];

var transaction = db.transaction(dbName, "readwrite");
// 打開存儲對象
var objectStore = transaction.objectStore('customers');
// 添加到數據對象中

customerData.forEach(function(item){
    objectStore.put(item,item.id);
});

// 查詢
db.transaction("customers").objectStore("customers").get("1").onsuccess = function(event) {
  console.log(event.target.result.name);
};

存儲大小 50MB 左右

應用場景

• 跨 Tab 通訊
• 存儲二進制 文件

文章來自胡城的我的網站