前端數據庫——WebSQL和IndexedDB

1、WebSQLjavascript

本地存儲(localstorage && sessionstorage) ； html

離線緩存(application cache)；前端

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

咱們對數據庫的通常概念是後端纔會跟數據庫打交道，進行一些業務性的增刪改查。而這裏的數據庫也不一樣於真正意義上的數據庫。web

廢話少說，先出招吧：sql

主要方法：數據庫

openDatabase：這個方法使用現有的數據庫或者新建的數據庫建立一個數據庫對象。
transaction：這個方法讓咱們可以控制一個事務，以及基於這種狀況執行提交或者回滾。
executeSql：這個方法用於執行實際的 SQL 查詢。

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

數據庫名稱
版本號
描述文本
數據庫大小
建立回調

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

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

示例：

 1 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
 2 db.transaction(function (tx) {
 3   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
 4   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
 5   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]); //使用外部變量，執行時會將變量數組中的值依次替換前邊的問號位置
 6     tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
 7         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; } 
 8     }, null); //查詢和回調
 9   tx.executeSql('DELETE FROM LOGS  WHERE id=1'); //刪除
10   tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
11   tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); //更新
12   tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
13 });

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

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

2、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: 'zhangsan@example.com' });

  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: 'lisi@example.com' });

  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 {
    // ...
  }
}

**********轉摘：http://www.javashuo.com/article/p-rknjkilw-o.html