前端數據庫——WebSQL和IndexedDB

一、WebSQL

WebSQL是前端的一個獨立模塊，是web存儲方式的一種，我們調試的時候會經常看到，只是一般很少使用。並且，當前只有谷歌支持，ie和火狐均不支持。

我們對數據庫的一般概念是后端才會跟數據庫打交道，進行一些業務性的增刪改查。而這里的數據庫也不同於真正意義上的數據庫。

廢話少說，先出招吧：

主要方法：

1. openDatabase：這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。
2. transaction：這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。
3. executeSql：這個方法用於執行實際的 SQL 查詢。

openDatabase() 方法對應的五個參數說明：

1. 數據庫名稱
2. 版本號
3. 描述文本
4. 數據庫大小
5. 創建回調

transaction執行數據庫操作，操作內容就是正常的數據庫的增刪改查。

executeSql是執行具體的sql，參數是1.sql語句（大寫？），2.語句中的變量，3.執行后的回調，4.

 

示例：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
  tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]); //使用外部變量，執行時會將變量數組中的值依次替換前邊的問號位置
    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
        var len = results.rows.length, i; msg = "<p>查詢記錄條數: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#status').innerHTML += msg; } 
    }, null); //查詢和回調
  tx.executeSql('DELETE FROM LOGS  WHERE id=1'); //刪除
  tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
  tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); //更新
  tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

基本操作與實際數據庫操作基本一致。

 

最終的數據去向，我理解為只是做臨時存儲和大型網站的業務運行存儲緩存的作用，頁面刷新后該庫就不存在了。而其本身與關系數據庫的概念比較相似。

 

二、IndexedDB

誕生背景：

　　隨着瀏覽器的功能不斷增強，越來越多的網站開始考慮，將大量數據儲存在客戶端，這樣可以減少從服務器獲取數據，直接從本地獲取數據。現有的瀏覽器數據儲存方案，都不適合儲存大量數據：Cookie 的大小不超過4KB，且每次請求都會發送回服務器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引。所以，需要一種新的解決方案，這就是 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的一些基本概念：

• 數據庫：IDBDatabase 對象
• 對象倉庫：IDBObjectStore 對象
• 索引： IDBIndex 對象
• 事務： IDBTransaction 對象
• 操作請求：IDBRequest 對象
• 指針： IDBCursor 對象
• 主鍵集合：IDBKeyRange 對象

（1）數據庫。

數據庫是一系列相關數據的容器。每個域名（嚴格的說，是協議 + 域名 + 端口）都可以新建任意多個數據庫。

IndexedDB 數據庫有版本的概念。同一個時刻，只能有一個版本的數據庫存在。如果要修改數據庫結構（新增或刪除表、索引或者主鍵），只能通過升級數據庫版本完成。

（2）對象倉庫

每個數據庫包含若干個對象倉庫（object store）。它類似於關系型數據庫的表格。

（3）數據記錄

對象倉庫保存的是數據記錄。每條記錄類似於關系型數據庫的行，但是只有主鍵和數據體兩部分。主鍵可以是數據記錄里面的一個屬性，也可以指定為一個遞增的整數編號。

（4）索引

（5）事務

數據記錄的讀寫和刪改，都要通過事務完成。事務對象提供error、abort和complete三個事件，用來監聽操作結果。

 

基本操作：

（1）打開數據庫

使用 IndexedDB 的第一步是打開數據庫，使用indexedDB.open()方法。

這個方法接受兩個參數，第一個參數是字符串，表示數據庫的名字。如果指定的數據庫不存在，就會新建數據庫。第二個參數是整數，表示數據庫的版本。如果省略，打開已有數據庫時，默認為當前版本；新建數據庫時，默認為1。

indexedDB.open()方法返回一個 IDBRequest 對象。這個對象通過三種事件error、success、upgradeneeded，處理打開數據庫的操作結果。

（2）新建數據庫

eg：

var db;
var objectStore;
var request = window.indexedDB.open(databaseName, version);

request.onerror = function (event) {}
request.onsuccess = function (event) {
    db = request.result//可以拿到數據庫對象
}
//如果指定的版本號，大於數據庫的實際版本號，就會發生數據庫升級事件upgradeneeded
request.onupgradeneeded = function (event) {
    db = event.target.result;
    if (!db.objectStoreNames.contains('person')) {//判斷是否存在
        objectStore = db.createObjectStore('person', { keyPath: 'id' });
//自動生成主鍵db.createObjectStore(
//  'person',
//  { autoIncrement: true }
//);
    }
    //新建索引，參數索引名稱、索引所在的屬性、配置對象
    objectStore.createIndex('email', 'email', { unique: true });
}

（3）新增數據

在以上操作的基礎上，需要新建一個事務。新建時必須指定表格名稱和操作模式（"只讀"或"讀寫"）。新建事務以后，通過IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 對象，再通過表格對象的add()方法，向表格寫入一條記錄。

寫入操作是一個異步操作，通過監聽連接對象的success事件和error事件，了解是否寫入成功。

eg：

function add() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .add({ id: 1, name: '張三', age: 24, email: '[e-mail]' });

  request.onsuccess = function (event) {
    console.log('數據寫入成功');
  };

  request.onerror = function (event) {
    console.log('數據寫入失敗');
  }
}

add();

（4）讀取數據

objectStore.get()方法用於讀取數據，參數是主鍵的值。

eg：

function read() {
   var transaction = db.transaction(['person']);
   var objectStore = transaction.objectStore('person');
   var request = objectStore.get(1);

   request.onerror = function(event) {
     console.log('事務失敗');
   };

   request.onsuccess = function( event) {
      if (request.result) {
        console.log('Name: ' + request.result.name);
        console.log('Age: ' + request.result.age);
        console.log('Email: ' + request.result.email);
      } else {
        console.log('未獲得數據記錄');
      }
   };
}

read();

（5）遍歷數據

遍歷數據表格的所有記錄，要使用指針對象 IDBCursor。openCursor()方法是一個異步操作，所以要監聽success事件。

function readAll() {
  var objectStore = db.transaction('person').objectStore('person');

   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('Age: ' + cursor.value.age);
       console.log('Email: ' + cursor.value.email);
       cursor.continue();
    } else {
      console.log('沒有更多數據了！');
    }
  };
}

readAll();

（6）數據更新

IDBObject.put()方法。

function update() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .put({ id: 1, name: '李四', age: 35, email: '[e-mail]' });

  request.onsuccess = function (event) {
    console.log('數據更新成功');
  };

  request.onerror = function (event) {
    console.log('數據更新失敗');
  }
}

update();

（7）數據刪除

IDBObjectStore.delete()方法用於刪除記錄。

function remove() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .delete(1);

  request.onsuccess = function (event) {
    console.log('數據刪除成功');
  };
}

remove();

（8）索引的使用

添加索引后可以使用索引查詢數據

var transaction = db.transaction(['person'], 'readonly');
var store = transaction.objectStore('person');
var index = store.index('name');
var request = index.get('李四');

request.onsuccess = function (e) {
  var result = e.target.result;
  if (result) {
    // ...
  } else {
    // ...
  }
}