HTML5本地存储——Web SQL Database
在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少量數據結構很有用，但是對于大量結構化數據就無能為力了，靈活大不夠強大。
Web SQL Database
我們經常在數據庫中處理大量結構化數據，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端數據庫的 API，這些 API 是異步的，規范中使用的方言是SQLlite，悲劇正是產生于此，Web SQL Database規范頁面有著這樣的聲明
This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
?大概意思就是
這個文檔曾經在W3C推薦規范上，但規范工作已經停止了。目前已經陷入了一個僵局：目前的所有實現都是基于同一個SQL后端（SQLite），但是我們需要更多的獨立實現來完成標準化。
也就是說這是一個廢棄的標準了，雖然部分瀏覽器已經實現，但。。。。。。。
三個核心方法
但是我們學一下也沒什么壞處，而且能和現在W3C力推的IndexedDB做比較，看看為什么要廢棄這種方案。Web SQL Database 規范中定義的三個核心方法：
openDatabase
我們可以使用這樣簡單的一條語句，創建或打開一個本地的數據庫對象：
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);openDatabase接收五個參數：
如果提供了回調函數，回調函數用以調用 changeVersion() 函數，不管給定什么樣的版本號，回調函數將把數據庫的版本號設置為空。如果沒有提供回調函數，則以給定的版本號創建數據庫。
transaction
transaction方法用以處理事務，當一條語句執行失敗的時候，整個事務回滾。方法有三個參數
這個例子中我們創建了一個table，并在表中插入三條數據，四條執行語句任何一條出現錯誤，整個事務都會回滾
executeSql
executeSql方法用以執行SQL語句，返回結果，方法有四個參數
在上面的例子中我們使用了插入語句，看個查詢的例子
1 db.transaction(function (context) { 2 context.executeSql('SELECT * FROM testTable', [], function (context, results) { 3 var len = results.rows.length, i; 4 console.log('Got '+len+' rows.'); 5 for (i = 0; i < len; i++){ 6 console.log('id: '+results.rows.item(i).id); 7 console.log('name: '+results.rows.item(i).name); 8 } 9 });完整示例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Web SQL Database</title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024); 9 var msg; 10 db.transaction(function (context) { 11 context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)'); 12 context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")'); 13 context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")'); 14 context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")'); 15 }); 16 17 db.transaction(function (context) { 18 context.executeSql('SELECT * FROM testTable', [], function (context, results) { 19 var len = results.rows.length, i; 20 console.log('Got '+len+' rows.'); 21 for (i = 0; i < len; i++){ 22 console.log('id: '+results.rows.item(i).id); 23 console.log('name: '+results.rows.item(i).name); 24 } 25 }); 26 }); 27 </script> 28 </body> 29 </html>最后
由于Web SQL Database規范已經被廢棄，原因說的很清楚，當前的SQL規范采用SQLite的SQL方言，而作為一個標準，這是不可接受的，每個瀏覽器都有自己的實現這還搞毛的標準。這樣瀏覽器兼容性就不重要了，估計慢慢會被遺忘。不過Chrome的控制臺真心好用啊，神馬cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增內容看的一清二楚，免去了很多調試代碼工作。
轉載于:https://www.cnblogs.com/joyco773/p/6164942.html
總結
以上是生活随笔為你收集整理的HTML5本地存储——Web SQL Database的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 部署 DevStack - 每天5分钟玩
- 下一篇： HTML5 元素选择流程图