HTML5本地存儲——Web SQL Database與indexedDB

　　雖然在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少許數據結構頗有用，可是對於大量結構化數據就無能爲力了，靈活大不夠強大。咱們常常在數據庫中處理大量結構化數據，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端數據庫的 API，這些 API 是異步的，規範中使用的方言是SQLlite。這個文檔曾經在W3C推薦規範上，但規範工做已經中止了。目前已經陷入了一個僵局：目前的全部實現都是基於同一個SQL後端（SQLite），可是咱們須要更多的獨立實現來完成標準化。

接下來將和W3C力推的IndexedDB作比較，看看爲何要廢棄這種方案。Web SQL Database 規範中定義的三個核心方法：

1. openDatabase：這個方法使用現有數據庫或新建數據庫來建立數據庫對象
2. transaction：這個方法容許咱們根據狀況控制事務提交或回滾
3. executeSql：這個方法用於執行SQL 查詢。

openDatabase

咱們可使用這樣簡單的一條語句，建立或打開一個本地的數據庫對象

var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase接收五個參數：

1. 數據庫名字
2. 數據庫版本號
3. 顯示名字
4. 數據庫保存數據的大小（以字節爲單位 )
5. 回調函數（非必須)

若是提供了回調函數，回調函數用以調用 changeVersion() 函數，無論給定什麼樣的版本號，回調函數將把數據庫的版本號設置爲空。若是沒有提供回調函數，則以給定的版本號建立數據庫。

transaction方法用以處理事務，當一條語句執行失敗的時候，整個事務回滾。方法有三個參數

1. 包含事務內容的一個方法
2. 執行成功回調函數（可選）
3. 執行失敗回調函數（可選）

db.transaction(function (context) {
　　　　　　var e_id =1,e_log = ‘dfa’;
           context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
           context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');//插入操做
           context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
           context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');

 　　　　　　　context.executeSql('INSERT INTO testTable (id,name) VALUES (?,?)',[e_id,e_log])

         });

　　這個例子中，中咱們建立了一個table，並在表中插入三條數據，四條執行語句任何一條出現錯誤，整個事務都會回滾

executeSql方法用以執行SQL語句，返回結果，方法有四個參數

1. 查詢字符串
2. 用以替換查詢字符串中問號的參數
3. 執行成功回調函數（可選）
4. 執行失敗回調函數（可選）

db.transaction(function (context) {
           context.executeSql('SELECT * FROM testTable', [], function (context, results) {
            var len = results.rows.length, i;
            console.log('Got '+len+' rows.');
               for (i = 0; i < len; i++){
              console.log('id: '+results.rows.item(i).id);
              console.log('name: '+results.rows.item(i).name);
            }
         });

　　因爲Web SQL Database規範已經被廢棄，緣由說的很清楚，當前的SQL規範採用SQLite的SQL方言，而做爲一個標準，這是不可接受的，每一個瀏覽器都有本身的實現這還搞毛的標準。這樣瀏覽器兼容性就不重要了，估計慢慢會被遺忘。

 

indexedDB——瀏覽器裏邊的內置數據庫
　　IndexedDB是HTML5規範裏新出現的瀏覽器裏內置的數據庫。對於在瀏覽器裏存儲數據，你可使用cookies或local storage，但它們都是比較簡單的技術，而IndexedDB提供了相似數據庫風格的數據存儲和使用方式。存儲在IndexedDB裏的數據是永久保存，不像cookies那樣只是臨時的。IndexedDB裏提供了查詢數據的功能，在online和offline模式下都能使用。你能夠用IndexedDB存儲大型數據。

　　IndexedDB裏數據以對象的形式存儲，每一個對象都有一個key值索引。IndexedDB裏的操做都是事務性的。一種對象存儲在一個objectStore裏，objectStore就至關於關係數據庫裏的表。IndexedDB能夠有不少objectStore，objectStore裏能夠有不少對象。每一個對象能夠用key值獲取。

一、indexedDB VS LocalStorage

　　IndexedDB和LocalStorage都是用來在瀏覽器裏存儲數據，但它們使用不一樣的技術，有不一樣的用途，你須要根據本身的狀況適當的選擇使用哪一種。LocalStorage是用key-value鍵值模式存儲數據，但跟IndexedDB不同的是，它的數據並非按對象形式存儲。它存儲的數據都是字符串形式。若是你想讓LocalStorage存儲對象，你須要藉助JSON.stringify()能將對象變成字符串形式，再用JSON.parse()將字符串還原成對象。但若是要存儲大量的複雜的數據，這並非一種很好的方案。畢竟，localstorage就是專門爲小數量數據設計的，它的api是同步的。

IndexedDB很適合存儲大量數據，它的API是異步調用的。IndexedDB使用索引存儲數據，各類數據庫操做放在事務中執行。IndexedDB甚至還支持簡單的數據類型。IndexedDB比localstorage強大得多，但它的API也相對複雜。

　　對於簡單的數據，你應該繼續使用localstorage，但當你但願存儲大量數據時，IndexedDB會明顯的更適合，IndexedDB能提供你更爲複雜的查詢數據的方式。

 

二、IndexedDB vs Web SQL

　　WebSQL也是一種在瀏覽器裏存儲數據的技術，跟IndexedDB不一樣的是，IndexedDB更像是一個NoSQL數據庫，而WebSQL更像是關係型數據庫，使用SQL查詢數據。W3C已經再也不支持這種技術。由於再也不支持上面也大體分析了其用法，也就再也不贅訴。

 

三、IndexedDB vs Cookies

　　Cookies(小甜點)聽起來很好吃，但實際上並非。每次HTTP接受和發送都會傳遞Cookies數據，它會佔用額外的流量。例如，若是你有一個10KB的Cookies數據，發送10次請求，那麼，總計就會有100KB的數據在網絡上傳輸。Cookies只能是字符串。瀏覽器裏存儲Cookies的空間有限，不少用戶禁止瀏覽器使用Cookies。因此，Cookies只能用來存儲小量的非關鍵的數據。

 

四、IndexedDB的用法

想要理解這個API，最好的方法是建立一個簡單的web應用：好比把大家班的學生的學號和姓名存儲在IndexedDB裏。IndexedDB裏提供了簡單的增、刪、改、查接口。

(1)、瀏覽器是否支持：

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

if(!window.indexedDB){ console.log("你的瀏覽器不支持IndexedDB"); }

(2)、建立

 一旦你的瀏覽器支持IndexedDB，咱們就能夠打開它。但不能直接打開IndexedDB數據庫。IndexedDB須要你建立一個請求來打開它。

 var request = window.indexedDB.open("testDB", 2);//第一個參數是數據庫的名稱，第二個參數是數據庫的版本號。版本號能夠在升級數據庫時用來調整數據庫結構和數據

 

但你增長數據庫版本號時，會觸發onupgradeneeded事件，這時可能會出現成功、失敗和阻止事件三種狀況。

var db;
request.onerror = function(event){
    console.log("打開DB失敗", event);
}
request.onupgradeneeded   = function(event){
    console.log("Upgrading");
    db = event.target.result;
    var objectStore = db.createObjectStore("students", { keyPath : "rollNo" });
};
request.onsuccess  = function(event){
    console.log("成功打開DB");
    db = event.target.result;
}

 

　　onupgradeneeded事件在第一次打開頁面初始化數據庫時會被調用，或在當有版本號變化時。因此，你應該在onupgradeneeded函數裏建立你的存儲數據。若是沒有版本號變化，並且頁面以前被打開過，你會得到一個onsuccess事件。若是有錯誤發生時則觸發onerror事件。若是你以前沒有關閉鏈接，則會觸發onblocked事件。

(3)增——往ObjectStore裏新增對象

//爲了往數據庫裏新增數據，咱們首先須要建立一個事務，並要求具備讀寫權限。在indexedDB裏任何的存取對象的操做都須要放在事務裏執行。

var transaction = db.transaction(["students"],"readwrite");
transaction.oncomplete = function(event) {
    console.log("Success");
};
transaction.onerror = function(event) {
    console.log("Error");
};  
var objectStore = transaction.objectStore("students");
objectStore.add({rollNo: rollNo, name: name});

(4)刪——ObjectStore裏刪除對象

//刪除跟新增同樣，須要建立事務，而後調用刪除接口，經過key刪除對象。
db.transaction(["students"],"readwrite").objectStore("students").delete(rollNo);

(5)查——經過key取出對象，即往get()方法裏傳入對象的key值，取出相應的對象。

var request = db.transaction(["students"],"readwrite").objectStore("students").get(rollNo);
request.onsuccess = function(event){
    console.log("Name : "+request.result.name);    
};

 

(6)改—— 爲了更新一個對象，首先要把它取出來，修改，而後再放回去。

var transaction = db.transaction(["students"],"readwrite");
var objectStore = transaction.objectStore("students");
var request = objectStore.get(rollNo);
request.onsuccess = function(event){
    console.log("Updating : "+request.result.name + " to " + name);
    request.result.name = name;
    objectStore.put(request.result);
};